html - 如何将由图像组成的画布保存到图像对象中

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

您必须将 toDataURL 移到 onload 函数中。现在，在图像完成加载之前调用 toDataURL。