Maison > interface Web > Tutoriel H5 > le corps du texte

Résumé des problèmes et des solutions rencontrés lorsque les images Canvas traversent des domaines

不言
Libérer: 2018-09-17 16:04:01
original
6854 Les gens l'ont consulté

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...
Copier après la connexion

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.
Copier après la connexion

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.
Copier après la connexion

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.
Copier après la connexion

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.
Copier après la connexion

Exemple de test

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èmes

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!