Comment résoudre le problème de l'erreur toDataURL() lors de l'introduction d'images inter-domaines dans Canvas

Cet article présente principalement les informations pertinentes sur la façon de résoudre le problème de l'erreur toDataURL() causée par l'introduction d'images inter-domaines dans Canvas. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et. donnez-le comme référence. Venez jeter un œil avec l'éditeur

Manuel recommandé :Manuel de référence de la dernière version HTML5

Cet article présente les résultats de l'introduction de cross -images de domaine dans Canvas La solution à l'erreur signalée par toDataURL() est partagée avec tout le monde. Les détails sont les suivants :

[Scénario]

. Lorsque l'utilisateur ouvre la page Web, Tencent COS est demandé (images photo sur le serveur). Dessinez à l’aide d’une toile.

Ensuite, l'utilisateur peut resélectionner l'image, la recadrer et la télécharger.

【Problème】

Lorsque l'image est chargée pour la première fois, il n'y a aucun problème de recadrage et de dessin après la sélection d'une nouvelle image. Mais le téléchargement a échoué et l'erreur a été signalée comme suit :

Échec de l'exécution de 'toDataURL' sur 'HTMLCanvasElement' : les toiles contaminées ne peuvent pas être exportées. Lors de la citation, définissez le champ crossOrigin :

et exécutez à nouveau. J'ai constaté que l'image ne s'affichait pas lors de son premier chargement. . .

                var c=document.getElementById("cover_show");
                var img=new Image();
                img.src="http://vsqx-cover-xxxxxx.coscd.myqcloud.com/"+this.vsqx_uid+".jpg";
                //增加这一行：
                img.setAttribute("crossOrigin",'anonymous');
                img.onload = function(){
                    var cxt=c.getContext("2d");
                    cxt.drawImage(img,0,0,300,150,0,0,200,126);
                }

La console a signalé l'erreur suivante :

[Solution finale]

Connectez-vous à Tencent Cloud COS, recherchez ce compartiment et définissez « Accès inter-domaines CORS ». (Il en va de même pour les autres serveurs PHP/JAVA)

Testez à nouveau : l'image s'affiche avec succès et l'image est téléchargée avec succès.

Articles connexes recommandés :

1.

Introduction au rôle de la balise html5 canvas et à l'origine historique de la balise canvas2.
Tutoriel d'animation HTML5 Canvas (Canvas) de trois minutes
Tutoriel vidéo associé : 1.Tutoriel vidéo Dugu Jiujian (1)_HTML5

Ce qui précède est l'intégralité du contenu de cet article, je l'espère sera utile à l’apprentissage de chacun !

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!