img 标签的 HTML 跨域属性

Question

我正在尝试了解如何为 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, 40);
}
</script>

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

我的猜测是，如果一个站点允许在 CORS 请求由匿名完成的情况下在画布中使用其图像，您可以在画布中绘制它，如果不是，即使请求是由匿名完成的，您也无法在画布中绘制它（我不确定我是否在这里）。因此，上述两个示例都必须匿名请求 CORS。

你能说如果他们两个工作相同吗？如果不是，请您解释一下原因并举个例子，使用带有 img 标签的 crossorigin 属性？

Answer 1

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

但是...

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

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

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

这意味着缓存的图像数据仍会将画布污染为包含跨域内容。

顺便说一句，您的代码中有语法错误：

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

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