So lösen Sie das Problem des toDataURL()-Fehlers bei der Einführung domänenübergreifender Bilder in Canvas

In diesem Artikel werden hauptsächlich relevante Informationen zur Lösung des Problems des toDataURL()-Fehlers vorgestellt, der durch die Einführung domänenübergreifender Bilder in Canvas verursacht wird. Der Herausgeber hält es für recht gut, daher werde ich es jetzt mit Ihnen teilen Geben Sie es als Referenz an. Kommen Sie und schauen Sie sich den Editor an

Empfohlenes Handbuch: HTML5-Referenzhandbuch für die neueste Version

Dieser Artikel stellt die Ergebnisse der Einführung von Cross vor -Domain-Bilder in Canvas Die Lösung für den von toDataURL() gemeldeten Fehler wird wie folgt mit allen geteilt:

[Szenario]

Wenn der Benutzer Öffnet die Webseite, Tencent COS wird angefordert (Bildbilder auf dem Server). Verwenden Sie Leinwand zum Zeichnen.

Dann kann der Benutzer das Bild erneut auswählen, zuschneiden und hochladen.

【Problem】

Wenn das Bild zum ersten Mal geladen wird, gibt es nach der Auswahl eines neuen Bildes kein Problem beim Zuschneiden und Zeichnen. Der Upload ist jedoch mit folgendem Fehler fehlgeschlagen:

Fehler beim Ausführen von „toDataURL“ auf „HTMLCanvasElement“: Befleckte Leinwände können beim Zitieren nicht exportiert werden. Legen Sie das Feld „crossOrigin“ fest:

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); }

Nach dem Login kopieren

und erneut ausführen. Ich habe festgestellt, dass das Bild beim ersten Laden nicht angezeigt wurde. . .

Die Konsole hat den folgenden Fehler gemeldet:

[Endgültige Lösung]

Anmelden bei Tencent Cloud COS, suchen Sie diesen Bucket und legen Sie „Cross-domain access CORS“ fest. (Gleiches gilt auch für andere PHP/JAVA-Server)

Erneut testen: Das Bild wird erfolgreich angezeigt und das Bild wurde erfolgreich hochgeladen.

Empfohlene verwandte Artikel:

1. Einführung in die Rolle des HTML5-Canvas-Tags und den historischen Ursprung des Canvas-Tags
2. Dreiminütiges HTML5-Canvas-Animations-Tutorial (Canvas)
Zugehöriges Video-Tutorial: 1.
Dugu Jiujian (1)_HTML5-Video-Tutorial
Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe es wird für das Lernen aller hilfreich sein!

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem des toDataURL()-Fehlers bei der Einführung domänenübergreifender Bilder in Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!