提交表單后更新和保存畫布

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();
    }
};