Maison > Article > interface Web > Résumé des problèmes et des solutions rencontrés lorsque les images Canvas traversent des domaines
Le contenu de cet article est un résumé des problèmes et des solutions rencontrés lorsque des images Canvas inter-domaines sont rencontrées. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Bien qu'il soit possible d'utiliser Canvas sans CORS Utilisez des images sur toile, mais cela polluera la toile. Une fois le canevas contaminé, vous ne pouvez plus lire ses données. Par exemple, vous ne pouvez plus utiliser les fonctions toBlob(), toDataURL() ou getImageData(), leur appel générera une erreur de sécurité. Ce mécanisme peut éviter les fuites de confidentialité des utilisateurs causées par l’extraction d’informations de sites Web distants sans autorisation.
L'image dans la spécification HTML a un attribut crossorigin Combiné avec l'en-tête de réponse CORS approprié, vous pouvez utiliser l'image de l'élément inter-domaine
crossOrigin/CORS | 同域 | 跨域无 CORS | 跨域有 CORS |
---|---|---|---|
default | 支持 | 支持渲染,不支持 toDataURL
|
支持渲染,不支持 toDataURL
|
anonymous | N/A | 同上 | 支持渲染,支持 toDataURL
|
use-credentials | N/A | 同上 | 支持渲染,不支持 toDataURL
|
Résumé : Canvas peut restituer des images inter-domaines normalement, mais lorsque l'image inter-domaine ne définit pas d'en-tête de réponse inter-domaine ou ne définit pas crossOrigin = 'anonymous', en utilisant canvas.toDataURl lancera l'erreur suivante :
Chrome
crossOrigin non défini
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 set
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 n'est pas défini
SecurityError : L'opération n'est pas sécurisée.
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= est défini sur les informations d'identification
[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 Démarrez le serveur
npm start : démarrez le serveur
npm run start. :corsdisable : Démarrez le serveur d'images inter-domaines
npm run start:corsable : Démarrez le serveur d'images inter-domaines-CORS
2. Visitez http://localhost:3000
Autres problèmes1. CossOrigin a des problèmes de compatibilitéPour les navigateurs qui ne prennent pas en charge cossOrigin (IE 10 et versions antérieures ne sont pas prises en charge, Android 4.3 et versions antérieures ne sont pas prises en charge), vous pouvez utiliser XMLHttprequest. et URL.createObjectURL() pour la compatibilité, reportez-vous à l'exemple de test Ajax pour résoudre le problème inter-domaines des images Canvas. 2. Pourquoi ne pas utiliser des images du même domaine ? Le développement front-end d'aujourd'hui place généralement des ressources statiques sur CDN, telles que Alibaba Cloud ou Tencent Cloud Services, et il y aura un nom de domaine dédié pour accéder à ces ressources.Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!