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.
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
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!