Domainübergreifende Bildressourcenberechtigungen (CORS-fähiges Bild)

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 im Canvas verwendet werden, genau wie sie direkt von der aktuellen Website (aktueller Ursprung) heruntergeladen werden.

Einzelheiten zur Verwendung von Crossorigin-Attributen finden Sie unter CORS-Einstellungsattribute.

Obwohl es möglich ist, Bilder im Canvas ohne CORS-Genehmigung zu verwenden, wird dadurch der Canvas beeinträchtigt. Solange die Leinwand kontaminiert ist, können keine Daten mehr aus der Leinwand extrahiert werden, was bedeutet, dass Methoden wie toBlob(), toDataURL() und getImageData() nicht aufgerufen werden können, da sonst ein Sicherheitsfehler ausgegeben wird.

Dies dient eigentlich dazu, die persönlichen Daten der Benutzer zu schützen und zu verhindern, dass die Bildinformationen der Benutzer ohne Erlaubnis von Remote-Websites geladen werden, was zu Datenschutzverlusten führt.

(Anmerkung des Übersetzers: Wenn sich der Benutzer bei sozialen Netzwerken wie QQ angemeldet hat und kein Schutz bereitgestellt wird, kann die Website nach dem Öffnen einer Website möglicherweise Canvas verwenden, um die Bildinformationen des Benutzers abzurufen und hochzuladen, was zu Lecks führt.)

Zunächst muss der Bildserver den entsprechenden Access-Control-Allow-Origin Antwortheader festlegen. Fügen Sie das crossOrigin-Attribut des img-Elements zum Anforderungsheader hinzu. Beispielsweise kann der Apache-Server die Konfigurationsinformationen in den 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 Origin : IS_CORS Header-Set Access-Control-Allow-Origin * env=IS_CORS </FilesMatch> </IfModule></IfModule>

Nachdem diese Einstellungen wirksam wurden, können Sie Bilder von anderen Sites im DOM-Speicher (oder an anderen Orten) speichern, genau wie die Ressourcen dieser Site.

 var img = new Image, canvas = document.createElement(canvas), ctx = canvas.getContext(2d), src = http://example.com/image; // Spezifische Bildadresse img.crossOrigin = Anonymous;img = function() { canvas.width = img.width; canvas.height = img.height( img, 0, 0 ); localStorage.setItem( savingImageData, canvas.toDataURL(image/png) );}img.src = src;// Stellen Sie sicher, dass das zwischengespeicherte Bild auch das Ladeereignis auslöst, wenn ( img.complete || img.complete == = undefiniert ) { img.src = data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==;}

Browserkompatibilität

Desktop

Mobile

Siehe auch

Chrome: Verwendung von Cross-Origin-Bildern in WebGL

HTML-Spezifikation-Crossorigin-Attribut

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.