Introduction à la solution interdomaine Canvas

Cet article vous présente la solution interdomaine Canvas. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

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.

Regardons d'abord la méthode de mise en œuvre.

Méthode de mise en œuvre

L'image cible est généralement composée d'image + 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 :

Obtenir le contexte du canevas--ctx

const canvas = document.querySelector(selector)
const ctx = canvas.getContext('2d')

Dessin

Ignorer le contenu de l'image et utilisez drawImage directement. Dessinez-le simplement sur la toile.

const image = new Image()
image.src = src
image.onload = () => {
    ctx.save()
    // 这里我们采用以下参数调用
    this.ctx.drawImage(image, dx, dy, dWidth, dHeight)
    this.ctx.restore()
}

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

Obtenir les données de l'image

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

canvas.toBlob(blob => {
    // 你要的 blob
}, 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.

Canvas inter-domaines

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

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

ou

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Regardons d'abord la deuxième situation.

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

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Indique 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 le même ressource de domaine à la place (pensez-y ? ).

Ensuite, résolvons la première situation.

img.crossOrigin = 'Anonymous'
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), lorsque vous appelez Canvas toBlob(), toDataURL() ou getImageData() généreront une erreur de sécurité :

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

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

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

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

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!