Saat menggambar gambar tautan eksternal di kanvas, kita akan menemui masalah lintas domain.
Contohnya adalah sebagai berikut:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <lebar kanvas=600 tinggi=300 id=kanvas>< /kanvas> <img id=gambar <skrip> var kanvas = document.getElementById('kanvas'); var ctx = kanvas.getContext('2d'); var gambar = Gambar baru(); gambar.onload = fungsi() { ctx.drawImage(gambar, 0, 0); dokumen.getElementById('gambar').src = kanvas.toDataURL('gambar/png'); ; 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg'; </script></body>Saat membuka halaman ini di browser, Anda akan menemukan masalah ini:
DOMException yang tidak tertangkap: Gagal menjalankan 'toDataURL' di 'HTMLCanvasElement': Kanvas yang tercemar tidak dapat diekspor.
Hal ini dibatasi oleh kebijakan CORS, dan akan ada masalah lintas domain. Meskipun gambar dapat digunakan, menggambar di kanvas akan mencemari kanvas. Setelah kanvas tercemar, data di kanvas tidak dapat diekstraksi. kanvas toBlob() tidak dapat digunakan. metode toDataURL(), atau getImageData();
Ini adalah masalah yang merepotkan, tapi untungnya img telah menambahkan atribut crossorigin, yang menentukan apakah fungsi CORS diaktifkan selama proses akuisisi gambar:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <lebar kanvas=600 tinggi=300 id=kanvas>< /kanvas> <img id=gambar <skrip> var kanvas = document.getElementById('kanvas'); var ctx = kanvas.getContext('2d'); var gambar = Gambar baru(); gambar.setAttribute('crossorigin', 'anonim'); gambar.onload = function() { ctx.drawImage(gambar, 0, 0); = kanvas.toDataURL('gambar/png'); 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg'; </script></body>Membandingkan dua potongan kode JS di atas, Anda akan menemukan baris tambahan ini:
image.setAttribute('crossorigin', 'anonim');Sesederhana itu, solusi sempurna!
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.