问题描述
我的问题仅在加载的图像被预加载到其他地方时出现.例如,当我在某处使用带有src
属性的<img>
-标签.
My issue only arises when the loaded image was preloaded somewhere else. For example, when I somewhere use a <img>
-tag with the src
attribute.
看看这段代码:
<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错误:
If you are clicking on the button and open your console, you will see that you are getting a CORS-error:
现在,让我们来看下一个示例,它可以在不预加载图像的情况下运行: https://jsfiddle.net/akzxp9vs/
Now let's take the next example to see that it is working without preloading the image: https://jsfiddle.net/akzxp9vs/
注意:要使此示例正常工作,删除缓存+强制重新加载浏览器非常重要.
只有这样,您才能看到正确的标头响应正在回馈.
Only then you see that the correct header response is giving back.
有什么想法我能做什么?
Any ideas what I can do?
该图像位于S3数字海洋云中,称为空间.图片本身设置为公开,CORS设置设置为:
The image is on the S3 Cloud of Digital Ocean, called Spaces. The image itself is set to public and the CORS setting are set to:
推荐答案
在发出HTTP请求时(即包含Origin
标头等),浏览器需要知道检查CORS权限.
The browser needs to know to check for CORS permissions when the HTTP request is made (i.e. to include an Origin
header etc).
创建新的Image
对象时,该对象将使用<img>
元素中的缓存数据.
When you create a new Image
object, it uses the cached data from the <img>
element.
向现有属性添加 crossorigin
属性<img>
元素或完全删除该<img>
元素.
Add a crossorigin
attribute to the existing <img>
element or remove that <img>
element entirely.
这篇关于仅在预加载图像时,画布才会出现CORS问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!