Penjelasan mendetail tentang praktik escape lintas-domain Canvas

Bagaimana cara mengatasi masalah lintas domain Canvas? Di sini kami mencatat masalah lintas domain dan solusi yang ditemui saat menggambar menggunakan Canvas.

Mari kita lihat dulu metode penerapannya.

Gambar target umumnya terdiri dari gambar + teks. Baik itu gambar dengan berbagai ukuran atau teks yang tidak dapat diprediksi, hal ini dapat dilakukan menggunakan metode canvas api drawImage dan fillText.

Proses dasarnya adalah sebagai berikut:

1. Dapatkan konteks kanvas--ctx

 const kanvas = dokumen.querySelector(selector)const ctx = kanvas.getContext('2d')

2. Menggambar

Abaikan konten pada gambar dan langsung gunakan drawImage untuk menggambarnya di kanvas.

 const image = new Image()image.src = srcimage.onload = () => { ctx.save() // Di sini kita menggunakan parameter berikut untuk memanggil this.ctx.drawImage(image, dx, dy, dWidth, dHeight ) ini .ctx.restore()}

drawImage memiliki 3 cara menggunakan parameter. Untuk penggunaan spesifik, Anda dapat memeriksa dokumentasi MDN.

3. Dapatkan data gambar

Panggil saja metode toBlob(), toDataURL() atau getImageData() yang disediakan oleh objek DOM HTMLCanvasElement.

 canvas.toBlob(blob => { // gumpalan yang Anda inginkan}, mimeType, encoderOptions)

Nilai default mimeType di sini adalah image/png. encoderOptions menentukan kualitas gambar dan dapat digunakan untuk kompresi, tetapi format mimeType harus berupa gambar/jpeg atau gambar/webp.

Dalam keadaan normal, jika kita perlu menampilkan gambar yang digambar, kita dapat memanggil metode toBlob(), toDataURL(), atau getImageData() kanvas untuk mendapatkan data gambar. Namun, agak memalukan ketika menemukan gambar lintas domain. Kesalahan berikut mungkin dilaporkan:

Gagal menjalankan 'toBlob' di 'HTMLCanvasElement': Kanvas yang tercemar tidak dapat diekspor.

atau

Akses ke gambar di 'https://your.image.src' dari asal 'https://your.website' telah diblokir oleh kebijakan CORS: Tidak ada header 'Access-Control-Allow-Origin' pada sumber daya yang diminta .

Mari kita lihat situasi kedua terlebih dahulu.

Akses-Kontrol-Izinkan-Asal

Jika Anda menggunakan sumber daya gambar tertentu di seluruh domain dan layanan tidak merespons header Access-Control-Allow-Origin dengan benar, pesan kesalahan berikut akan dilaporkan:

Akses ke gambar di 'https://your.image.src' dari asal 'https://your.website' telah diblokir oleh kebijakan CORS: Tidak ada header 'Access-Control-Allow-Origin' pada sumber daya yang diminta .

Artinya akses lintas domain tidak diperbolehkan, lalu Anda dapat mencoba membiarkan latar belakang mengubah nilai Access-Control-Allow-Origin menjadi * atau situs web Anda, atau menggunakan sumber daya domain yang sama (pikirkan?) .

Selanjutnya, mari selesaikan situasi pertama.

 img.crossOrigin = 'Anonim'

Untuk menghindari kebocoran privasi pengguna yang disebabkan oleh mengambil informasi situs web jarak jauh tanpa izin (seperti GPS dan informasi lainnya, Anda dapat mencari detailnya di Exif), kesalahan keamanan akan terjadi saat memanggil toBlob(), toDataURL() atau getImageData() dari kanvas:

Gagal menjalankan 'toBlob' di 'HTMLCanvasElement': Kanvas yang tercemar tidak dapat diekspor.

Jika layanan gambar Anda mengizinkan penggunaan lintas asal (jika tidak, lihat artikel sebelumnya), maka Anda harus mempertimbangkan untuk menambahkan atribut crossOrigin ke elemen img, yaitu:

 const image = Gambar baru()image.crossOrigin = 'Anonim'image.src = src

Dengan cara ini, Anda bisa mendapatkan data gambar. Jika Anda tidak dapat menemukannya, gunakan sumber daya dari domain yang sama~

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.