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

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

我的问题是，因为预期它不工作（而不是将其与以前的图像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; 
      } 

     });

注意，有抽奖方法也有载：

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


       };

来源

2014-08-29 raklos

我很困惑你的代码，也许你可以为我清除一些东西。 'can'指向的变量是什么？应该'imgsrc'实际上是'img.src'吗？ – ericjbasti 2014-09-05 20:00:47

的问题是很可能，你需要等待图像在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);但这不是最好的解决办法。

来源

2014-08-29 18:38:59 EvilZebra

我想接近它是这样的：

$('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.您需要在手动提交之前解除绑定事件处理程序，否则提交事件将再次触发并继续在循环中运行！

来源

2014-09-01 10:14:16 SimonR

翻阅你的代码我想我明白你想要做什么，为什么它不工作。首先，我认为你的示例代码有一些不应该存在的错误。我打算假设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(); 
    } 
};

来源

2014-09-05 20:20:56 ericjbasti

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

回答

相关问题