Mari kita bahas dulu tentang metode dasar menggambar kanvas, sebagai berikut:
const myCanvas = dokumen.createElement('canvas'); myCanvas.width = 400; myCanvas.height = 400; const ctx = myCanvas.getContext('2d'); 1.jpg;//Dalam drawImage saat gambar dimuat, jika tidak, gambar mungkin belum dimuat img.onload=()=>{ ctx.drawImage(img, 0, 0, 100, 50);} tata bahasa:gambar gambar(gambar, x, y)
Mulai dari titik koordinat yang ditentukan pada kanvas, gambarlah seluruh gambar sesuai dengan ukuran asli gambar.
drawImage(gambar, x, y, lebar, tinggi)
Mulai dari titik koordinat yang ditentukan pada kanvas, gambar seluruh gambar dengan ukuran (lebar dan tinggi) yang ditentukan, dan gambar akan otomatis diskalakan.
drawImage(gambar, gambarX, gambarY, lebar gambar, tinggi gambar, x, y, lebar, tinggi)
Gambarkan sebagian gambar dari gambar yang ditentukan (bagian persegi panjang dengan (imageX, imageY) sebagai sudut kiri atas, lebar sebagai imageWidth, dan tinggi sebagai imageHeight) ke dalam kanvas, dengan (x, y) sebagai koordinat sudut kiri atas, lebar dengan lebar, dan tinggi dengan tinggi pada luas persegi panjang
Skenario bisnis penggabungan multi-gambar ini adalah membuat gambar bersama yang disesuaikan dengan konten berbeda. Elemen gambar yang digunakan meliputi gambar latar belakang, gambar tautan eksternal, logo situs web, dan gambar kode QR yang disesuaikan Diproduksi saat mengonversi kanvas menjadi keluaran gambar. Ada tiga poin utama:
1. Masalah gambar lintas domain;
2. Menggambar banyak gambar akan menyebabkan polusi kanvas;
3. Ukuran gambar;
Pertama-tama, ada masalah gambar lintas domain. Ada banyak informasi relevan tentang masalah ini di Internet. Solusinya adalah sebagai berikut:
img.setAttribute('crossOrigin', 'anonim');Setelah menyelesaikan masalah lintas domain, pesan kesalahan baru muncul setelah penggabungan dan ekspor multi-gambar:
DOMException Tidak Tertangkap: Gagal menjalankan 'toDataURL' di 'HTMLCanvasElement': Kanvas Tercemar tidak dapat diekspor.
Ketika saya menemukan masalah ini, saya memeriksa informasi di Internet, dan sebagian besar diselesaikan menggunakan metode lintas domain di atas, tetapi jelas ini tidak berhasil dalam skenario bisnis saya.
Melalui pemecahan masalah kode, saya menemukan bahwa kesalahan ini tidak akan dilaporkan saat menggunakan gambar latar belakang + gambar kode QR. Jika gambar tautan eksternal diproses lintas domain, maka tidak akan dilaporkan kesalahan saat digunakan sendiri. Semua gambar logo adalah file lokal dan jelas tidak boleh menjadi masalah lintas domain.
Jadi alasan mengapa gambar kode QR dan gambar latar belakang bebas kesalahan adalah karena sumber gambar kode QR dalam format base64.
Jadi, saya mencoba menggunakan kanvas untuk mengekspor gambar logo ke format base64, lalu menggabungkannya dengan gambar latar + gambar kode QR.
Semua masalah dengan Tainted Canvases saat mengekspor beberapa gambar secara bersamaan dapat dihindari dengan membuat elemen gambar ke dalam format base64.
Karena ada gambar tautan eksternal dalam skenario bisnis saya, dan tidak semua tautan eksternal memproses nama domain situs web saya untuk memungkinkan pemrosesan lintas domain, jadi ketika membuat data base64 dari gambar tautan eksternal, saya menggunakan acara img.onerror pemrosesan. , diganti dengan diagram default.
Karena beberapa gambar diproses secara terpisah sebelum keseluruhan gambar digambar, mungkin lebih baik menggunakan pemrosesan Promise.
Mengenai ukuran ekspor gambar, coba gunakan
myCanvas.toDataURL('gambar/jpeg', encoderOptions)encoderOptions: Anda dapat memilih kualitas gambar dari 0 hingga 1. Jika rentang nilai terlampaui, nilai default 0,92 akan digunakan. Parameter lainnya diabaikan.
Di atas adalah ringkasan pribadi pengalaman saya dalam menyatukan banyak gambar di kanvas dan mengekspornya. Saya berharap ini dapat membantu pembelajaran semua orang, dan saya juga berharap semua orang mendukung Jaringan VeVb Wulin.