javascript - 图片 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。