Lors du dessin d’une image de lien externe dans Canvas, nous rencontrerons un problème inter-domaines.
Les exemples sont les suivants :
<!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var image = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image').src = canvas.toDataURL('image/png' } ; image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';En ouvrant cette page dans un navigateur, vous rencontrerez ce problème :
DOMException non interceptée : échec de l'exécution de "toDataURL" sur "HTMLCanvasElement" : les canevas contaminés ne peuvent pas être exportés.
Ceci est limité par la politique CORS et il y aura des problèmes entre domaines. Bien que des images puissent être utilisées, dessiner sur le canevas polluera le canevas. Une fois qu'un canevas est pollué, les données du canevas ne peuvent pas être extraites. le canevas toBlob() ne peut pas être utilisé. la méthode toDataURL() ou getImageData() ; l'erreur de sécurité ci-dessus sera générée lors de l'utilisation de ces méthodes ;
Il s'agit d'un problème gênant, mais heureusement, img a ajouté l'attribut crossorigin, qui détermine si la fonction CORS est activée pendant le processus d'acquisition d'image :
<!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var image = new Image(); image.setAttribute('crossorigin', 'anonymous'); image.onload = function() { ctx.drawImage(image, 0, 0); = toile.toDataURL('image/png'); }; image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';En comparant les deux morceaux de code JS ci-dessus, vous trouverez cette ligne supplémentaire :
image.setAttribute('crossorigin', 'anonyme');C'est aussi simple que ça, une solution parfaite !
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.