爲什麼在canvas（JS）t​​oDataUrl（）在drawImage（）之後不起作用？

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> 

我試過以fillRect()爲例，而不是drawImage()。所以它正常工作...我敢肯定，原因是drawImage()

Answer 1

如果您的圖像網址（原始網址，而不是數據網址）來自不同的域，而不是運行代碼的頁面的域，則當您將圖像繪製到它時，畫布將被污染，並且您將無法將像素取出。這是一個安全措施。因此，如果您正在使用jsfiddle進行測試，並且您正在使用http://placekitten.com/100/100網址進行測試，則無法運行。

請注意，大多數現代瀏覽器不會考慮兩個file:// URL共享一個域，所以如果您從本地文件運行測試，它將不起作用。