Ringkasan membuka kunci N postur untuk mengekspor gambar dari kanvas di seluruh domain

Artikel ini memperkenalkan ringkasan N postur untuk membuka kunci gambar yang diekspor lintas domain dari kanvas. Saya ingin membagikannya kepada Anda.

DOMException yang tidak tertangkap: Gagal menjalankan 'toDataURL' di 'HTMLCanvasElement': Kanvas yang tercemar tidak dapat diekspor.

Saya yakin semua orang pernah mengalami kesalahan di atas saat menggunakan kanvas untuk mengeksekusi toDataUrl untuk mengekspor gambar. Nama domain server gambar berbeda dari yang sekarang karena kebijakan keamanan tidak mengizinkan ekspor gambar lintas domain.

Ketika gambar menjadi base64, tidak perlu membicarakan nama domain, dan tentu saja tidak ada lintas domain

Catatan: Konversikan gambar ke base64 dan perbesar ukuran file gambar. Jika gambar relatif besar, tidak disarankan untuk mengonversi ke base64, jika tidak maka akan menambah waktu pemuatan halaman web dan mempengaruhi kecepatan situs web untuk gambar kecil.

Artinya, header respons yang dikembalikan dengan meminta gambar berisi Access-Control-Allow-Origin dengan nilai yang disetel ke * (mengizinkan permintaan lintas domain dari semua situs web) atau nama domain situs web saat ini (hanya mengizinkan permintaan lintas domain di bawah nama domain tetap), lalu front-end memuat gambar. Setel atribut lintas asal gambar img.crossOrigin=anonymous。 Kode spesifiknya adalah sebagai berikut

 var kanvas = document.getElementById('myCanvas') var ctx = kanvas.getContext('2d') var img = document.createElement('img') img.crossOrigin=anonim img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg' img.onload = function() { ctx.drawImage(img,0,0,500,300); keDataURL()) }

Dengan cara ini, masalah lintas domain dapat diselesaikan dengan mudah dengan menggabungkan bagian depan dan belakang

Maafkan saya karena tertawa tidak ramah, ini memang solusi masalah.

TETAPI Dalam proyek sebenarnya, gambar umumnya disimpan di CDN, jadi metode ini tidak realistis.