Javascript-fillRect和drawImage之后的getImageData

Question

我有以下问题：当我绘制矩形（使用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/

Answer 1

如果您在控制台中查看，它将告诉您错误：

Unable to get image data from canvas because the canvas has been tainted
by cross-origin data.

因此，它不想读取数据，因为您的图像可能是恶意的。 为防止这种情况，请在服务器上托管映像，或执行诸如base64编码等操作，将所需的映像编码并嵌入到页面中。

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