HTML-crossorigin-Attribut für img-tag
Ich versuche zu verstehen, wie die crossorigin-Attribut für das img-tag. Ich konnte Sie nicht finden, ein gutes Beispiel (die, Die ich gefunden über CORS aktiviert Bildern erläutert werden, die mit JavaScript-codes, daher konnte ich nicht sehen, die crossorigin-Attribut des img-Tags.
Ich habe eine Vermutung, bitte korrigieren Sie meine Fehler, wenn ich etwas falsch verstanden.
Zunächst kann man schreiben, das code-Stück unten, um zu zeichnen Sie ein Bild auf die Leinwand:
<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>
Ist der code unten entspricht dem oberen ein? Es hat nicht "Abb.crossOrigin" aber haben crossorigin-Attribut im 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>
Die Wahrheit zu sagen, ich kann keine Experimente machen, weil ich nicht weiß, was vor Ort erlaubt, die Verwendung seiner Bilder, wie CORS.
Was ich denke, ist, dass, wenn eine Website zulassen, um die Verwendung seiner Bilder im canvas-Bereich, wenn die CORS-request erfolgt durch anonym können Sie ziehen Sie es im canvas-Bereich, wenn nicht, können Sie nicht ziehen Sie es in die Leinwand, auch wenn die Anforderung erfolgt durch anonym (ich bin nicht sicher, ob ich richtig bin hier). Daher die beiden obigen Beispielen muss angefordert werden CORS anonym.
Könnten Sie bitte sagen, ob beide Werke den gleichen? Wenn nicht, könnten Sie bitte erklären, warum und gib mir ein Beispiel, in dem die crossorigin-Attribut des img-Tags?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Da Sie über die #Bild-element als Quelle für das Bild, die 2 Versionen des Codes sind in etwa gleichwertig.
Aber...
Die version ohne
crossorigin="anonymous"
im img-element wird wahrscheinlich immer noch erzeugen eine cross-domain-Verletzung.Das ist, weil das Bild ursprünglich geladen in das img-element ohne die cross-origin-flag gesetzt, um anonyme.
Den javascript-code wird wahrscheinlich verwenden Sie die zwischengespeicherte version des Bildes aus dem img-element anstatt zu versuchen, es neu laden von http://...
Dies bedeutet, dass die zwischengespeicherten Bilddaten werden noch verderben die Leinwand, wie mit cross-origin-Inhalten.
BTW, ein syntax-Fehler in deinem code: