Résumé du déverrouillage de N postures pour l'exportation d'images à partir de canevas vers différents domaines

Cet article présente un résumé des N postures pour déverrouiller les images exportées entre domaines à partir de Canvas. Je voudrais les partager avec vous. Les détails sont les suivants :

DOMException non interceptée : échec de l'exécution de "toDataURL" sur "HTMLCanvasElement" : les canevas contaminés ne peuvent pas être exportés.

Je pense que tout le monde a rencontré l'erreur ci-dessus lors de l'utilisation de Canvas pour exécuter toDataUrl afin d'exporter des images. Le nom de domaine du serveur d'images est différent de celui actuel car la politique de sécurité n'autorise pas l'exportation d'images entre domaines.

Lorsque l'image devient base64, il n'y a pas de nom de domaine. Naturellement, il n'y a pas de cross-domain.

Remarque : convertissez l'image en base64 et augmentez la taille du fichier image. Si l'image est relativement volumineuse, il n'est pas recommandé de la convertir en base64, sinon cela augmentera le temps de chargement de la page Web et affectera la vitesse du site Web. pour les petites images.

Autrement dit, l'en-tête de réponse renvoyé en demandant l'image contient Access-Control-Allow-Origin avec la valeur définie sur * (autorisant les requêtes inter-domaines de tous les sites Web) ou le nom de domaine actuel du site Web (autorisant uniquement les requêtes inter-domaines sous noms de domaine fixes), puis le frontal charge l'image. Définissez l'attribut d'origine croisée de l'image img.crossOrigin=anonymous。 Le code spécifique est le suivant

 var canvas = document.getElementById('myCanvas') var ctx = canvas.getContext('2d') var img = document.createElement('img') img.crossOrigin=anonyme img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg' img.onload = function() { ctx.drawImage(img,0,0,500,300); versDataURL()) }

De cette manière, les problèmes inter-domaines peuvent être facilement résolus en combinant à la fois l'avant et l'arrière.

Pardonnez-moi de rire méchamment, c'est bien une solution au problème.

MAIS Dans les projets réels, les images sont généralement stockées sur CDN, cette méthode n'est donc pas réaliste.