我试图了解如何使用img标记的crossorigin属性.我找不到一个好的例子(我发现的关于CORS启用的图像用
JavaScript代码解释,因此我看不到img标签的crossorigin属性.
我猜错了,如果我理解错了,请纠正我的错误.
首先,可以编写下面的代码片段来绘制图像到画布：
<canvas id="canvas" width=400 height=400></canvas>
<br><br>
<img id="image" src="http://...." alt="" width="400" height="400">
<script>
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.crossOrigin = "Anonymous";
img.src = document.getElementById("image").value;
context.drawImage(img,40,40);
}
</script>
下面的代码是否等同于上面的代码？它不包含“img.crossOrigin”,但在img标记中具有crossorigin属性.
<canvas id="canvas" width=400 height=400></canvas>
<br><br>
<img id="image" crossorigin="anonymous"src="http://...." alt="" width="400" height="400">
<script>
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = document.getElementById("image").value;
context.drawImage(img,40);
}
</script>
说实话,我无法进行实验,因为我不知道哪个站点允许将其图像用作CORS.
我猜想,如果一个站点允许在画布中使用它的图像,如果CORS请求是匿名完成的,你可以在画布上绘制它,如果不是你不能在画布上绘制它,即使请求是匿名完成的(我是不确定我是不是在这里).因此,上述两个示例都必须匿名请求CORS.
你能说他们两个都一样吗？如果没有,你能解释一下为什么,并给我一个使用带有img标签的crossorigin属性的例子吗？
解决方法
由于您使用#image元素作为图像的源,因此代码的两个版本大致相同.
但…
img元素中没有crossorigin =“anonymous”的版本可能仍会生成跨域违规.
那是因为图像最初被加载到img元素中而没有将跨源标志设置为匿名.
javascript代码可能会使用img元素中图像的缓存版本,而不是尝试从http：//重新加载它…
这意味着缓存的图像数据仍然会将画布污染为包含跨源内容.
// Not: img.src = document.getElementById("image").value;
img.src = document.getElementById("image").src;
