javascript - 仅当预加载图像时， Canvas 才会出现 CORS 问题

Question

仅当加载的图像预加载到其他位置时，才会出现我的问题。例如，当我在某处使用<img>时- 带有 src 的标签属性。

看一下这段代码:

 <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;" ></canvas>
 
 <img src="https://local-spaces.fra1.digitaloceanspaces.com/test.jpg" width="50"/>
 
 <button onclick="show()">Load Canvas Picture</button>
 
 <script>
function show() {
  	const c = document.getElementById("myCanvas");
    const ctx = c.getContext("2d");

    const img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');


    img.onload = function(){
      ctx.drawImage(img,0,0, 300, 150);
    };
		
    img.src = "https://local-spaces.fra1.digitaloceanspaces.com/test.jpg"
   
}
</script>

注意:如果您在 Canvas 中正确看到图像，请缓存+硬重新加载您的浏览器以查看错误。

如果您单击按钮并打开控制台，您将看到出现 CORS 错误:

Access to image at 'https://local-spaces.fra1.digitaloceanspaces.com/test.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

现在让我们看下一个例子，看看它是否在没有预加载图像的情况下工作:https://jsfiddle.net/akzxp9vs/

注意:要使此示例正常运行，删除缓存并硬重新加载浏览器非常重要。

只有这样您才会看到正确的 header 响应正在返回。

有什么想法我可以做什么吗？

该图像位于 Digital Ocean 的 S3 云(称为 Spaces)上。图像本身设置为公开，并且 CORS 设置设置为:

Answer 1

浏览器需要知道在发出 HTTP 请求时检查 CORS 权限(即包含 Origin header 等)。

当您创建新的Image时对象，它使用 <img> 中的缓存数据元素。

添加 crossorigin 属性为现有<img>元素或删除 <img>完全元素。