javascript - 提交表单时更新并保存 Canvas

Question

我有以下代码，该代码在提交表单之前执行。

我正在更改图像，然后在保存该图像之前重新绘制 Canvas 。

我遇到的问题是它没有按预期工作(而是使用上一个图像 src 属性保存图像)...

如果我在 firebug 中单步执行它，则会保存正确的图像，这让我认为在保存之前需要有一个延迟......

我该怎么做？

$('#WindowForm').submit(function () {
            if (isInternal)
            {
                imgsrc = $(".externalColor.selected-color").find('img').attr("src");
                draw();

                var canvas = document.getElementById('myCanvas');

                context.drawImage(can, 0, 0)

                var dataURL = canvas.toDataURL();
                $("#ImageData").val(dataURL);
                return true;
            }

        });

请注意，draw 方法中也有一个 onload:

 var img = new Image();
 img.src = imgsrc;    
 img.onload = function () {
                    pattern = context.createPattern(img, "repeat");
                    context.fillStyle = pattern;
                    DrawContext(context);


                };

Answer 1

问题很可能是您需要等待图像加载到draw()中功能。最好的方法是在函数中包含回调参数，这样您就可以在完成后保存。

function draw(callback){
    //...
    img.onload = (function(callback){
        return function(){
            //...create your pattern...
            callback.call();
        };
    })(callback);
}

draw(function(){ /* ...save image... */ });

您还可以使用类似 setTimeout(function(){ /*...save image...*/ }, 1); 的内容但这不是最好的解决方案。