为什么在画布（JS）中toDataUrl（）在drawImage（）之后不起作用？答案

【问题标题】：Why in Canvas(JS) toDataUrl() doesn't work after drawImage()?为什么在画布（JS）中toDataUrl（）在drawImage（）之后不起作用？
【发布时间】：2014-06-06 22:15:00
【问题描述】：

<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()

【问题讨论】：

在你测试的代码中，图片的真实 URL是什么？特别是，它是否来自与代码所在页面相同的域？
另外，你真的应该在图像“onload”回调中调用“compress”；您依赖图像 HTTP 请求在 1 秒内完成，这可能会也可能不会发生。

标签： javascript canvas drawimage todataurl

【解决方案1】：

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

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

【讨论】：

其实图片和页面是在同一个域中的，并且URL中没有“file://”。这就是为什么您的解决方案不起作用的原因 =(
@user3560634 那么你必须提供更多信息，或者尝试摆脱setTimeout() hack，因为这也可能导致问题。
@user3560634 Here is your code in a test page I wrote, and it works properly. 我所做的只是在图像被绘制到画布后摆脱超时并将“压缩”调用移动到图像“加载”处理程序中。跨度>