1

我有以下问题：当我绘制一个矩形（使用 fillRect 方法），然后我绘制一个图像（使用 drawImage）时，我无法通过使用 getImageData 从 Contex 获得正确的结果。当我用 drawImage 注释行时，它可以正常工作。哪里有问题？

var img=document.getElementById("img");
var canvas=document.getElementById("can");
var ctx=canvas.getContext('2d');

ctx.fillStyle="red";
ctx.fillRect(0,0,50,50);
ctx.drawImage(img, 0, 0, 19, 19); //;(

var imgData=ctx.getImageData(0,0,50,50);
ctx.putImageData(imgData,100,100);

问题：http: //jsfiddle.net/yX5mj/1/

4

1 回答 1

1

如果您查看控制台，它会告诉您错误：

无法从画布获取图像数据，因为画布已被污染
通过跨域数据。

因此，它不想读取数据，因为您的图像可能是恶意的。为了防止这种情况发生，要么将图像托管在您的服务器上，要么执行 base64 之类的操作，对您想要的图像进行编码并将其嵌入到页面中。

您可以在此处查看 base64 编码示例，并且您可以在 Internet 上找到 base64 编码器。

于 2013-03-19T15:08:02.950 回答