img 标签的 HTML crossorigin 属性

Question

我想了解如何为 img 标签使用 crossorigin 属性。我找不到一个很好的例子(我找到的关于启用 CORS 的图像的例子是用 JavaScript 代码解释的，因此我看不到带有 img 标签的 crossorigin 属性。

我有一个猜测，如果我理解有误，请指正。

首先可以编写下面的代码片段来将图像绘制到 Canvas 上:

<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, 40);
}
</script>

说实话我无法进行实验，因为我不知道哪个站点允许将其图像用作 CORS。

我猜想，如果一个站点允许在 canvas 中使用它的图像，如果 CORS 请求是由匿名完成的，那么你可以在 canvas 中绘制它，否则即使请求是由匿名完成的，你也不能在 canvas 中绘制它(我不确定我是否就在这里)。因此，上述两个示例都必须匿名请求 CORS。

您能说一下它们的工作原理是否相同吗？如果不是，能否请您解释一下原因并给我一个使用带有 img 标签的 crossorigin 属性的示例？

Answer 1

由于您使用 #image 元素作为图像的来源，因此您的代码的 2 个版本大致相同。

但是……

img 元素中没有 crossorigin="anonymous" 的版本可能仍会产生跨域违规。

那是因为图像最初加载到 img 元素时没有将跨源标志设置为匿名。

javascript 代码可能使用 img 元素中图像的缓存版本，而不是尝试从 http://... 重新加载它

这意味着缓存的图像数据仍会污染 Canvas ，因为它包含跨源内容。

顺便说一句，您的代码中存在语法错误:

// Not:  img.src = document.getElementById("image").value;

img.src = document.getElementById("image").src;