Artikel ini memperkenalkan solusi untuk masalah toDataURL() yang melaporkan kesalahan saat memperkenalkan gambar lintas domain di Canvas. Saya ingin membagikannya kepada Anda.
【Pemandangan】
Saat pengguna membuka halaman web, dia meminta gambar di Tencent COS (server gambar). Menggambar menggunakan kanvas.
Pengguna kemudian dapat memilih ulang gambar, memotongnya, dan mengunggahnya.
【pertanyaan】
Saat gambar dimuat untuk pertama kali, tidak ada masalah dengan memotong dan menggambar setelah memilih gambar baru. Namun pengunggahan gagal dengan kesalahan berikut:
Gagal menjalankan 'toDataURL' di 'HTMLCanvasElement': Kanvas yang tercemar tidak dapat diekspor.
Setelah memahami, Anda perlu menyetel kolom crossOrigin saat gambar direferensikan untuk pertama kalinya:
var c=document.getElementById(cover_show); var img=Gambar baru(); img.src=http://vsqx-cover-xxxxxx.coscd.myqcloud.com/+this.vsqx_uid+.jpg; : img.setAttribute(crossOrigin,'anonim'); img.onload = function(){ var cxt=c.getContext(2d); cxt.drawImage(img,0,0,300,150,0,0,200,126 }Kemudian jalankan lagi. Saya menemukan bahwa gambar tersebut tidak ditampilkan saat pertama kali dimuat. . .
Kesalahan konsol adalah sebagai berikut:
【Solusi akhir】
Masuk ke Tencent Cloud COS, temukan bucket ini, dan siapkan CORS akses lintas domain. (Hal yang sama berlaku untuk server PHP/JAVA lainnya)
Tes lagi: gambar berhasil ditampilkan dan gambar berhasil diunggah.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.