In diesem Artikel wird die Lösung für das Problem vorgestellt, dass toDataURL() einen Fehler beim Einführen domänenübergreifender Bilder in Canvas meldet. Die Details sind wie folgt:
【Szene】
Wenn ein Benutzer eine Webseite öffnet, fordert er oder sie Bilder auf Tencent COS (Bilderserver) an. Zeichnen Sie mit Leinwand.
Der Benutzer kann das Bild dann erneut auswählen, zuschneiden und hochladen.
【Frage】
Wenn das Bild zum ersten Mal geladen wird, ist das Zuschneiden und Zeichnen nach der Auswahl eines neuen Bildes kein Problem. Der Upload ist jedoch mit folgendem Fehler fehlgeschlagen:
Fehler beim Ausführen von „toDataURL“ für „HTMLCanvasElement“: Befleckte Leinwände können möglicherweise nicht exportiert werden.
Nachdem Sie es verstanden haben, müssen Sie das Feld crossOrigin festlegen, wenn das Bild zum ersten Mal referenziert wird:
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);Führen Sie es dann erneut aus. Ich habe festgestellt, dass das Bild beim ersten Laden nicht angezeigt wurde. . .
Der Konsolenfehler lautet wie folgt:
【Endgültige Lösung】
Melden Sie sich bei Tencent Cloud COS an, suchen Sie diesen Bucket und richten Sie CORS für den domänenübergreifenden Zugriff ein. (Gleiches gilt auch für andere PHP/JAVA-Server)
Erneut testen: Das Bild wurde erfolgreich angezeigt und das Bild wurde erfolgreich hochgeladen.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.