[画布仅在预加载图像时出现CORS问题

Posted 2021-04-30

我的问题仅在加载的图像被预加载到其他位置时出现。例如，当我在某处使用<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>

注意：如果您在画布上正确看到图像，请缓存并重新加载浏览器以查看错误。

如果您单击该按钮并打开控制台，您会看到收到CORS错误：

在以下位置访问图像来自的“ https://local-spaces.fra1.digitaloceanspaces.com/test.jpg”原点“ null”已被CORS政策阻止：否请求中存在“ Access-Control-Allow-Origin”标头资源。

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

注意：要使此示例正常工作，删除缓存+强制重新加载浏览器非常重要。

只有这样您才能看到正确的标题响应正在回馈。

任何想法我能做什么？

图像位于数字海洋的S3云上，称为太空。图片本身设置为公开，CORS设置设置为：

答案

[当发出HTTP请求时，浏览器需要知道检查CORS权限（即包括Origin标头等）。

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

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

另一答案

我找到了解决我问题的更好方法。 @Quentin的解决方案基本上是正确的，但这是不切实际的。我尝试更新所有<img>标签，但是在我的页面中，我还有数十个使用<img>标签的软件包。

例如，传单。就像Google Maps，但带有Open Street Maps。您只是无权控制在自定义图标中设置<img>之类的属性。

因此必须有另一种解决方案。使用它感觉很不好，但是确实可以。

crossorigin

此代码将一个查询参数附加到您的URL，并强制Chrome重新加载图片而不进行缓存。