Berechtigungen für Cross-Origin-Image-Ressourcen (CORS-fähiges Image)

Das HTML-Spezifikationsdokument führt das Crossorigin-Attribut für Bilder ein. Durch Festlegen der entsprechenden Header-Informationen CORS können img-Bilder von anderen Websites geladen und in Canvas verwendet werden, als ob sie direkt von der aktuellen Website (aktueller Ursprung) heruntergeladen worden wären.

Einzelheiten zur Verwendung des Crossorigin-Attributs finden Sie unter CORS-Einstellungsattribute.

Was ist „verunreinigte“ Leinwand?

Obwohl es möglich ist, Bilder in der Leinwand ohne CORS-Autorisierung zu verwenden, wird hierdurch die Leinwand beschädigt. Sobald die Leinwand verunreinigt ist, können Sie keine Daten mehr aus der Leinwand extrahieren, was bedeutet, dass Sie keine Methoden wie toBlob(), toDataURL() und getImageData() mehr aufrufen können, da sonst ein Sicherheitsfehler ausgegeben wird.

Dies dient dazu, die persönlichen Daten des Benutzers zu schützen und zu verhindern, dass Bildinformationen des Benutzers ohne Erlaubnis von Remote-Websites geladen werden, was zu einem Verstoß gegen die Privatsphäre führen würde.

(Anmerkung des Übersetzers: Wenn sich der Benutzer bei sozialen Netzwerken wie QQ angemeldet hat und kein Schutz besteht, kann es sein, dass die Website nach dem Öffnen einer bestimmten Website Canvas verwendet, um die Bildinformationen des Benutzers abzurufen und hochzuladen, was zu Datenlecks führt.)

Beispiel: Bild von anderer Site speichern

Zuerst muss der Bildserver den entsprechenden Access-Control-Allow-Origin Antwortheader setzen. Fügen Sie dem Anforderungsheader das crossOrigin-Attribut des img-Elements hinzu. Beispielsweise können Sie für den Apache-Server die Konfigurationsinformationen in HTML5 Boilerplate-Apache-Serverkonfigurationen kopieren, um zu antworten:

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
    <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
        SetEnvIf Herkunft ":" IS_CORS
        Header-Satz Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
    </IfModule>
</IfModule> 

Wenn diese Einstellungen wirksam sind, können Sie Bilder von anderen Sites wie Ihre eigenen Ressourcen im DOM-Speicher (oder anderswo) speichern.

var img = neues Bild,
    Leinwand = Dokument.createElement("Leinwand"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // Spezifische Bildadresse img.crossOrigin = "Anonymous";

img.onload = Funktion() {
    Leinwand.Breite = Bild.Breite;
    Leinwandhöhe = Bildhöhe;
    ctx.drawImage(Bild, 0, 0);
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = Quelle;
// Stellen Sie sicher, dass zwischengespeicherte Bilder auch das Ladeereignis auslösen, wenn ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = Quelle;
}

Browserkompatibilität

Desktop

Mobile

Siehe auch

Chrome: Verwenden von Cross-Origin-Bildern in WebGL

HTML-Spezifikation - Crossorigin-Attribut

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.