图片网址到画布并保存

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。