为什么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://网址来共享域名，因此如果您从本地文件运行测试，则无法正常工作。