Zusammenfassung der Probleme und Lösungen, die auftreten, wenn Canvas-Bilder domänenübergreifend sind

Der Inhalt dieses Artikels ist eine Zusammenfassung der Probleme und Lösungen, die auftreten, wenn domänenübergreifende Canvas-Bilder angetroffen werden. Ich hoffe, dass er für Sie hilfreich ist.

Obwohl es möglich ist, Canvas ohne CORS zu verwenden Verwenden Sie Bilder auf Leinwand, aber dadurch wird die Leinwand verschmutzt. Sobald die Leinwand kontaminiert ist, können Sie ihre Daten nicht mehr lesen. Beispielsweise können Sie toBlob(), toDataURL() oder von Canvas nicht mehr verwenden getImageData()-Methoden, deren Aufruf einen Sicherheitsfehler auslöst. Dieser Mechanismus kann verhindern, dass die Privatsphäre des Benutzers durch das Abrufen von Remote-Website-Informationen ohne Erlaubnis beeinträchtigt wird.

Das Bild in der HTML-Spezifikation verfügt über ein Crossorigin-Attribut. In Kombination mit dem entsprechenden CORS-Antwortheader können Sie das Bild des domänenübergreifenden -Elements verwenden.

crossOrigin/CORS	同域	跨域无 CORS	跨域有 CORS
default	支持	支持渲染，不支持 toDataURL	支持渲染，不支持 toDataURL
anonymous	N/A	同上	支持渲染，支持 toDataURL
use-credentials	N/A	同上	支持渲染，不支持 toDataURL

Zusammenfassung: Canvas kann domänenübergreifende Bilder normal rendern, aber wenn das domänenübergreifende Bild keinen domänenübergreifenden Antwortheader festlegt oder crossOrigin = 'anonymous' nicht festlegt, verwenden Sie canvas.toDataURl wird den folgenden Fehler auslösen:

Chrome

crossOrigin ist nicht festgelegt

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at Image.img.onload...

Cross domain

Access to Image at 'http://localhost:3001/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

crossOrigin=use-credentials ist festgelegt

Access to Image at 'http://localhost:3002/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access.

Safari/ Firefox

crossOrigin ist nicht festgelegt

SecurityError: Der Vorgang ist unsicher.

Cross domain

[Error] Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin. (canvas.jpg, line 0)
[Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.

corssOrigin=use-credentials ist set

[Error] Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.
[Error] Failed to load resource: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true. (canvas.jpg, line 0)
[Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Testbeispiel

1. Starten Sie den Server

npm start: Starten Sie den Server

npm run start:corsdisable: Starten Sie die domänenübergreifende Funktion Bildserver

npm run start:corsable: Starten Sie den domänenübergreifenden CORS-Bildserver

2. Zugriff auf http://localhost:3000

Andere Probleme

1. Es gibt Kompatibilitätsprobleme mit cossOrigin

Für Browser, die cossOrigin nicht unterstützen (nicht unterstützt von IE 10 und niedriger, nicht unterstützt von Android 4.3 und niedriger), können Sie XMLHttprequest und URL.createObjectURL( ) Informationen zur Kompatibilität finden Sie im Testbeispiel Ajax, um das domänenübergreifende Problem von Canvas-Bildern zu lösen.

2. Warum nicht Bilder aus derselben Domain verwenden?

Die heutige Front-End-Entwicklung platziert im Allgemeinen statische Ressourcen auf CDN, wie z. B. Alibaba Cloud oder Tencent Cloud Services, und es wird einen dedizierten Domänennamen für den Zugriff auf diese Ressourcen geben.

Das obige ist der detaillierte Inhalt vonZusammenfassung der Probleme und Lösungen, die auftreten, wenn Canvas-Bilder domänenübergreifend sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!