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>

下面的代码是否等同于上面的代码？它没有包含＆＃34; img.crossOrigin＆＃34;但在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：// ...

重新加载它

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

BTW，代码中的语法错误：

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

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

img标签的HTML crossorigin属性

1 个答案: