問題描述

我正在嘗試了解如何為 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模板網！