img 标签的 HTML 跨域属性

问题描述

我正在尝试了解如何为 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 元素作为图像的来源，因此您的代码的两个版本大致相同.

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 跨域属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！