Cet article présente la solution au problème de toDataURL() signalant une erreur lors de l'introduction d'images inter-domaines dans Canvas. Je voudrais la partager avec vous. Les détails sont les suivants :
【Scène】
Lorsqu'un utilisateur ouvre une page Web, il demande des images sur Tencent COS (serveur d'images). Dessinez à l’aide d’une toile.
L'utilisateur peut ensuite resélectionner l'image, la recadrer et la télécharger.
【question】
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é avec l'erreur suivante :
Échec de l'exécution de « toDataURL » sur « HTMLCanvasElement » : les canevas contaminés ne peuvent pas être exportés.
Après compréhension, vous devez définir le champ crossOrigin lorsque l'image est référencée pour la première fois :
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 });Puis exécutez-le à nouveau. J'ai constaté que l'image ne s'affichait pas lors de son premier chargement. . .
L'erreur de la console est la suivante :
【Solution finale】
Connectez-vous à Tencent Cloud COS, recherchez ce compartiment et configurez l'accès CORS entre domaines. (La même chose s'applique aux autres serveurs PHP/JAVA)
Testez à nouveau : l'image s'affiche avec succès et l'image est téléchargée avec succès.
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.