Pourquoi `canvas.toDataURL()` génère-t-il une exception de sécurité avec les images d'origine croisée ?

Pourquoi canvas.toDataURL() déclenche-t-il une exception de sécurité lors de la récupération d'images d'origine croisée ?

Lors de la tentative d'exécution de canvas.toDataURL( ) sur un élément de canevas HTML5 contenant une image extraite d'une source d'origine croisée, vous pouvez rencontrer une erreur "SECURITY_ERR: DOM Exception 18". Cela se produit en raison des restrictions de sécurité imposées par les navigateurs Web.

Selon la spécification HTML5, la méthode toDataURL() lève une exception SECURITY_ERR lorsqu'elle est invoquée sur un élément de canevas dont l'indicateur "origin-clean" est faux. Cet indicateur est défini sur true si l'élément canvas contient uniquement des ressources de la même origine que le document dans lequel il réside. Dans votre cas, puisque l'image provient d'un domaine différent, l'indicateur "origin-clean" est défini sur false.

Solution de contournement :

Malheureusement, en raison de Compte tenu de ces contraintes de sécurité, il n'est pas possible d'utiliser toDataURL() pour récupérer une représentation PNG d'une image d'origine croisée. Pour résoudre ce problème, envisagez les options suivantes :

• Utiliser un proxy compatible CORS : Configurez un proxy côté serveur qui active le partage de ressources cross-origine (CORS). Cela vous permet d'effectuer des requêtes d'origine croisée et de contourner la restriction de sécurité.
• Utilisez l'API de fichier HTML5 : Au lieu d'utiliser toDataURL(), exploitez l'API de fichier pour créer un objet File à partir de la toile. Cela vous permet d'enregistrer l'image sous forme de fichier sans recourir à CORS.
• Utiliser des services tiers : Explorez les services tiers qui offrent des fonctionnalités de récupération d'images multi-origines, telles que crossOrigin .moi.

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!