img 标签的 HTML crossorigin 属性 [英] HTML crossorigin attribute for img tag

问题描述

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

I am trying to understand how to use the crossorigin attribute for the img tag. I couldn't find a good example (The ones I found about CORS enabled images are explained with JavaScript codes, therefore I couldn't see the crossorigin attribute with the img tag.

我有一个猜测，如果我理解错了，请纠正我的错误.

I have got a guess, please correct my mistakes if I understood something wrong.

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

First of all one can write the code piece below to draw an image to 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 属性.

Is the code below equivalent to the upper one? It doesn't include "img.crossOrigin" but have crossorigin attribute in the img tag.

<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.

To tell the truth I cannot make experiments because I don't know what site allows to use its images as CORS.

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

What I guess is that, if a site allow to use its images in canvas if the CORS request is done by anonymously you can draw it in canvas, if not you cannot draw it in canvas even if the request is done by anonymously (I am not sure if I am right here). Therefore both of the examples above must be requesting CORS anonymously.

你能说一下它们的工作原理是一样的吗?如果没有，请您解释原因并举个例子，使用带有 img 标签的 crossorigin 属性?

Could you please say if both of them works the same? If not, could you please explain why and give me an example using the crossorigin attribute with the img tag?

推荐答案

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

Since you are using the #image element as the source for your image, the 2 versions of your code are roughly equivalent.

但是...

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

The version without crossorigin="anonymous" in the img element will probably still generate a cross-domain violation.

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

That's because the image is originally loaded into the img element without the cross-origin flag set to anonymous.

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

The javascript code will likely use the cached version of the image from the img element rather than trying to reload it from http://...

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

This means the cached image data will still taint the canvas as containing cross-origin content.

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

BTW, a syntax error in your code:

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

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

这篇关于img 标签的 HTML crossorigin 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！