javascript - 为什么在画布（JS）中toDataUrl（）在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

如果您的图像 URL（原始 URL，而不是数据 URL）来自与运行代码的页面不同的域，那么当您将图像绘制到画布时，画布将被污染，您将无法获取像素回来了。那是一种安全措施。因此，如果您在 jsfiddle 上进行测试并且使用http://placekitten.com/100/100url 进行测试，它将无法正常工作。

请注意，大多数现代浏览器不会考虑使用两个file://URL 来共享一个域，因此如果您从本地文件运行测试，它将无法工作。