fillRect 및 drawImage 후 Javascript - getImageData

Question

다음과 같은 문제가 있습니다. (fillRect 메서드를 사용하여) 사각형을 그리고 drawImage를 사용하여 이미지를 그릴 때 Context에서 올바른 결과를 얻을 수 없습니다. getImageData. 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); 

문제 :

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

그래서, 그것은 이미지가 수 있기 때문에 데이터를 읽고 싶어하지 않습니다 http://jsfiddle.net/yX5mj/1/

Answer 1

콘솔에서 보면, 그것은 당신에게 오류를 알려줍니다 악의 있는. 이를 막으려면 서버에 이미지를 호스팅하거나 base64와 같은 방법으로 원하는 이미지를 인코딩 한 다음 페이지에 삽입하십시오.

base64 인코딩 here의 예를 볼 수 있으며 인터넷에서 base64 인코더를 찾을 수 있습니다.