2013-06-28 138 views
1

我在画布中创建图像并保存图像。我发现了一个非常漂亮的插件here绘制画布后在手机中保存画布图像

代码将图像保存:

  var canvas = document.getElementById('myCanvas'); 
      var context = canvas.getContext('2d'); 
      var imageObj = new Image(); 
      imageObj.src = imageURI; 
      imageObj.onload = function() { 
      contentW = $("#content").width(); 
      canvas.width = 400; 
      canvas.height = 600; 
      context.drawImage(imageObj, 0, 0,canvas.width,canvas.height); 

      //the plugin 
      setTimeout(function(){ 
      window.savephotoplugin(canvas,"image/png",device.version,function(val){ 
        //returns you the saved path in val 
        alert("Photo Saved: " + val); 
       }); 
      },3000) 
     } 

该插件非常不错唯一的问题就是之前画布甚至得出它完成。所以我放了一个setTimeout来避免它,但是有没有办法检测canvas何时完成并在其后调用函数。试过jQuery的.change()没有工作。

如果有人发现这个代码有用随意使用和插件是非常好的:)

回答

0

正如你可以看到drawImage不接受任何回调。此外,画布不定义关于其绘制过程的任何事件。所以你选择timeout是正确的。只有一件事你可能会改善。使用setTimeout(..., 0)而不是setTimeout(..., 3000)。关于这个技巧的更多细节here