Javascript 为什么Canvas（JS）中的toDataUrl（）不'；drawImage（）之后无法工作？ var canvas=document.getElementById（'myCanvas'）； var context=canvas.getContext（'2d'）； var img=新图像（）； img.onload=函数（）{ canvas.width=img.width； canvas.height=img.height； 背景图像（img，0,0）； } img.src=“2.jpg”； 函数compress（）{ var dataURL=canvas.toDataURL（“image/jpg”，0.5）； document.getElementById（“img”）.src=dataURL； } 设置超时（压缩，1000）；

我试着用

fillRect（）

代替

drawImage（）

。所以它正常工作。。。我确信原因是

drawImage（）

如果您的图像URL（原始URL，而不是数据URL）来自与代码运行页面不同的域，那么当您将图像绘制到画布上时，画布将被污染，并且您将无法恢复像素。这是一项安全措施。因此，如果您在jsfiddle上进行测试，并且使用

http://placekitten.com/100/100

URL要测试，它将不起作用

---

注意到，大多数现代浏览器都不考虑两个“代码>文件：//< /COD> URL来共享一个域，因此，如果您正在运行来自本地文件的测试，它将不起作用。

在您正在测试的代码中，图像的真实URL是什么？特别是，它是否与代码所在的页面来自同一个域？此外，您确实应该在image“onload”回调中调用“compress”；您正依赖映像HTTP请求在1秒内完成，这可能会发生，也可能不会发生。实际上，映像和页面位于同一个域中，URL中没有“file://”。这就是为什么您的解决方案不起作用=（@user3560634那么您必须提供更多信息，或者尝试摆脱

setTimeout（）

hack，因为这也可能导致问题。@user3560634我所做的更改就是摆脱超时并将“compress”调用移动到图像“load”中处理程序，将图像绘制到画布后。

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