Question

我目前正在做一个javascript函数，它通过在其中绘制一些绘图并从另一个网站加载图像来绘制HTML画布。

一切正常，直到我需要创建一个下载它的功能。起初，我遇到了一个安全错误，因为我没有设置我以匿名方式加载的图像的crossOrigin，所以我做了。然后我就能下载图像了。但是，它使我从其他网站加载到画布中的图像消失了。知道为什么吗？

以下是我的下载功能：

  function download(){
   var canvas=document.getElementById("canvas0");
   $("#btn-download").on("click",(e)=>{
   var data = canvas.toDataURL("data:image/png;");
   var btn=document.getElementById("btn-download");
   btn.href=data;
   btn.download="Canvas.png";
 });
}

这是我加载图片并将crossOrigin设置为匿名的地方。

img=new Image();
img.onload = function() {
 context.drawImage(img, 285, 160);
};
img.src = 'somelink';
img.crossOrigin = "anonymous"

感谢您的帮助！

Answer 1

好吧，经过深思熟虑，我意识到当网站给我图像时，Access-Control-Allow-Origin不在标题中，所以不可能将crossOrigin变为匿名。如果您遇到此问题，请检查您的控制台是否具有Access-Control-Allow-Origin。

将CrossOrigin设置为Anonymous后，Canvas中的JavaScript绘制消失

1 个答案: