如何将包含图像的画布保存到图像对象中

Question

我有一个画布，里面有一个图像。现在我试图将画布保存为我想在另一个画布中使用的Image对象。但每次我得到一个空的画布（没有图像）。这就是我在做的事情：

canvas.toDataURL（）

var imageObj = new Image();

imageObj.onload = function() {
    context.drawImage(imageObj,200,20,100,150);
};
imageObj.src = "images/yoda.jpg";
var canvasImage = canvas.toDataURL();

和 canvas.getContext（“2d”）。getImageData（）

var imageObj = new Image();

imageObj.onload = function() {
    context.drawImage(imageObj,200,20,100,150);
};
imageObj.src = "images/yoda.jpg"; 
var imageData = context.getImageData(195,15,110,160);

但这似乎并没有保存画布中的图像。有什么帮助吗？

查看实时预览

http://jsfiddle.net/tvnbD/17/

Answer 1

你必须在onload函数中移动到dataURL。现在，toDataURL在图像加载完成之前被调用。