提交表单后更新和保存画布

Question

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

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

我的问题是，它无法按预期工作（相反，它使用以前的图像src属性保存图像）...

如果我在萤火虫中逐步浏览，则会保存正确的图像，这使我认为保存之前需要一段时间。

我该怎么做？

$('#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); 但这不是最好的解决方案。

Answer 2

我会这样处理：

$( 'form' ).on(
    'submit',
    function( evt ) {

        var form = $( this );

        evt.preventDefault(); // prevent the form submission

        // ...do stuff...

        // delay the submission
        window.setTimeout(
            function() {

                form.off( 'submit' ); // remove this event handler
                form.submit(); // manually submit the form

            },
            500 // or whatever
        );

    }
);

这基本上阻止了表单的提交，直到所有内容都进行了排序，然后手动提交。 您可能希望将其与@Evilzebra的答案结合使用，并将超时功能保留在所创建图像的onload事件中，但是基本原理是相同的（防止提交，然后在准备好后手动提交）。

注意，您需要在手动提交之前取消绑定事件处理程序，否则Submit事件将再次触发并保持循环运行！

Answer 3

查看您的代码，我想我了解您正在尝试做的事情，以及为什么它不起作用。 首先，我认为您的示例代码存在一些错误，这些错误不应该存在。 我将假设imgsrc应该是img.src ，此时您进行异步调用以加载新图像，这很可能要等到您完成了该功能的其余部分之后才能完成。 解决此问题的快速简便的方法是创建一个标志，让img.onload知道是否应保存图像。 在下面的示例中，我键入了isInternal

$('#WindowForm').submit(function (e) {
    if (isInternal)
    {
        e.preventDefault();
        imgsrc = $(".externalColor.selected-color").find('img').attr("src");
        // this will then cause the img.onload to fire
    };
});

function pleaseSubmitMe(){
    draw();
    var canvas = document.getElementById('myCanvas');

    context.drawImage(can, 0, 0)
    var dataURL = canvas.toDataURL();
    $("#ImageData").val(dataURL);
    // alright now that thats done, lets submit this bad boy
    isInternal= false; // we need to set this to false so we actually try submitting
    $('#WindowForm').submit();
}

img.onload = function () {
    pattern = context.createPattern(img, "repeat");
    context.fillStyle = pattern;
    DrawContext(context);
    // if I'm Internal lets send this image to be submitted
    if(isInternal){
        pleaseSubmitMe();
    }
};