图像的URL到画布和保存

Question

我想从URL加载图像到画布，然后显示要保存的图像。我可以在画布上显示图像，但是当我尝试将图像显示为base64字符串时，它将显示为空白。这是我现在可以提出的，只需要最后一部分的帮助。

var canvas = document.getElementById('myCanvas'), 
    context = canvas.getContext('2d'), 
    imageObj = new Image(); 

imageObj.onload = function() { 
    context.drawImage(imageObj, 0, 0); 
}; 

imageObj.src = 'http://3.bp.blogspot.com/-4NP3xwj-ZMI/UXU8RT1k02I/AAAAAAAACEU/88knXDu2MeQ/s72-c/music3g1.JPG'; 

var dataURL = canvas.toDataURL(); 
document.getElementById('canvasImg').src = dataURL; 

Answer 1

好的，有几件事情要知道。

1. 当你从一个源绘制图像的画布域之外的HTML是，它标志了dirty标志在画布上。这使得它不能使用.toDataURL()函数。这主要是一个安全问题。

2. var dataURL = canvas.toDataURL(); document.getElementById('canvasImg').src = dataURL;在图像实际绘制到画布之前被调用。您需要获取数据url并在映像的onload函数中设置src。