drawImage() 이후 Canvas (JS) toDataUrl()이 작동하지 않는 이유는 무엇입니까?

Question

<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var img = new Image(); 
    img.onload = function(){ 
    canvas.width=img.width; 
    canvas.height=img.height; 
    context.drawImage(img,0,0); 
    } 
    img.src="2.jpg"; 
    function compress(){ 
    var dataURL = canvas.toDataURL("image/jpg",0.5); 
    document.getElementById("img").src=dataURL; 
    }   
    setTimeout(compress,1000); 
</script> 

예 : drawImage() 대신 fillRect()으로 사용하려고했습니다. 정상적으로 작동합니다 ... 이유는 다음과 같습니다. drawImage()

Answer 1

이미지 URL (데이터 URL이 아닌 원본 URL)이 코드가 실행되는 페이지와 다른 도메인에있는 경우 캔버스는 이미지를 그릴 때 오염 된이되며 픽셀을 다시 가져올 수 없습니다. 그것은 보안 조치입니다. 따라서 jsfiddle에서 테스트 중이며 테스트 할 URL이 http://placekitten.com/100/100 인 경우 작동하지 않습니다.

대부분의 최신 브라우저는 두 개의 file:// URL이 도메인을 공유하는 것으로 간주하지 않으므로 로컬 파일에서 테스트를 실행하는 경우에는 작동하지 않습니다.