Question

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

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

我遇到的问题是它无法按预期工作（而是使用之前的图像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);之类的内容，但这不是最佳解决方案。

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事件中，但基本原则将相同（阻止提交，然后手动提交一旦准备好）。

N.B。您需要在手动提交之前取消绑定事件处理程序，否则提交事件将再次触发并继续循环运行！

Answer 3

仔细阅读您的代码，我想我了解您正在尝试做什么，以及为什么它不起作用。首先，我认为您的示例代码存在一些不应该存在的错误。我假设imgsrc应该是img.src，此时您正在进行异步调用以加载新图片，这很可能在您和＃39之前完成; ve竞争了这个功能的其余部分。解决此问题的一种快速简便的方法是创建一个标志，让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();
    }
};

在表单提交时更新和保存画布

3 个答案: