Explication détaillée de la pratique d'évasion inter-domaines Canvas

Comment résoudre le problème inter-domaines de Canvas ? Nous enregistrons ici les problèmes inter-domaines et les solutions rencontrés lors du dessin à l'aide de Canvas.

Examinons d’abord la méthode de mise en œuvre.

L'image cible est généralement composée d'une image + d'un texte. Qu'il s'agisse d'images de différentes tailles ou de textes imprévisibles, cela peut être réalisé à l'aide des méthodes drawImage et fillText de l'API Canvas.

Le processus de base est le suivant :

1. Obtenir le contexte du canevas - ctx

 const canvas = document.querySelector(sélecteur)const ctx = canvas.getContext('2d')

2. Dessin

Ignorez le contenu de l'image et utilisez directement drawImage pour le dessiner sur le canevas.

 const image = new Image()image.src = srcimage.onload = () => { ctx.save() // Ici, nous utilisons les paramètres suivants pour appeler this.ctx.drawImage(image, dx, dy, dWidth, dHeight ) ce .ctx.restore()}

drawImage propose 3 façons d'utiliser les paramètres. Pour une utilisation spécifique, vous pouvez consulter la documentation MDN.

3. Obtenir des données d'image

Appelez simplement la méthode toBlob(), toDataURL() ou getImageData() fournie par l'objet DOM HTMLCanvasElement.

 canvas.toBlob(blob => { // blob que vous voulez}, mimeType, encoderOptions)

La valeur par défaut de mimeType ici est image/png. encoderOptions spécifie la qualité de l'image et peut être utilisé pour la compression, mais le format mimeType doit être image/jpeg ou image/webp.

Dans des circonstances normales, si nous devons générer l'image dessinée, nous pouvons appeler la méthode toBlob(), toDataURL() ou getImageData() du canevas pour obtenir les données de l'image. Cependant, c'est un peu gênant de rencontrer des images inter-domaines. Les erreurs suivantes peuvent être signalées :

Échec de l'exécution de « toBlob » sur « HTMLCanvasElement » : les canevas contaminés ne peuvent pas être exportés.

ou

L'accès à l'image sur « https://your.image.src » depuis l'origine « https://your.website » a été bloqué par la politique CORS : aucun en-tête « Access-Control-Allow-Origin » n'est présent sur la ressource demandée .

Examinons d’abord la deuxième situation.

Contrôle d'accès-Autoriser-Origine

Si vous utilisez certaines ressources d'image sur plusieurs domaines et que le service ne répond pas correctement à l'en-tête Access-Control-Allow-Origin, le message d'erreur suivant sera signalé :

L'accès à l'image sur « https://your.image.src » depuis l'origine « https://your.website » a été bloqué par la politique CORS : aucun en-tête « Access-Control-Allow-Origin » n'est présent sur la ressource demandée .

Cela signifie que l'accès entre domaines n'est pas autorisé, vous pouvez alors essayer de laisser l'arrière-plan modifier la valeur de Access-Control-Allow-Origin en * ou votre.website, ou utiliser la même ressource de domaine à la place (pensez-y ?) .

Ensuite, résolvons la première situation.

 img.crossOrigin = 'Anonyme'

Afin d'éviter les fuites de confidentialité des utilisateurs causées par l'extraction d'informations sur un site Web distant sans autorisation (telles que le GPS et d'autres informations, vous pouvez rechercher des détails dans Exif), une erreur de sécurité sera générée lors de l'appel de toBlob(), toDataURL() ou getImageData(). de toile :

Échec de l'exécution de « toBlob » sur « HTMLCanvasElement » : les canevas contaminés ne peuvent pas être exportés.

Si votre service d'imagerie autorise une utilisation cross-origin (sinon, consultez l'article précédent), alors vous devriez envisager d'ajouter l'attribut crossOrigin à l'élément img, c'est-à-dire :

 const image = new Image()image.crossOrigin = 'Anonyme'image.src = src

De cette façon, vous pouvez obtenir les données d'image. Si vous ne le trouvez pas, utilisez les ressources du même domaine~

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.