绘制画布后将画布图像保存在phonegap中

Question

我正在画布中创建图像并保存图像。 我在这里找到了一个非常不错的插件。

图片保存代码：

          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来避免它，但是有一种方法可以检测画布何时完成并在其之后调用该函数。 尝试过的jquery .change（）无法正常工作。

如果有人发现此代码有用，请随时使用，该插件非常好:)

Answer 1

如您所见， drawImage不接受任何回调。 而且canvas不会定义有关其绘制过程的任何事件。 因此，您选择的timeout是正确的。 只有一件事您可能会改进。 使用setTimeout(..., 0)代替setTimeout(..., 3000) 。 有关此技巧的更多详细信息，请点击此处