javascript - 为什么在 Canvas(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)来自与运行代码的页面不同的域，那么 Canvas 将在您绘制图像时被污染到它，你将无法恢复像素。那是一种安全措施。因此，如果您在 jsfiddle 上进行测试并使用 http://placekitten.com/100/100 url 进行测试，它将无法正常工作。

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