Gambar kanvas diadaptasi dan ditampilkan di tengah sesuai dengan metode isi atau sampul.

Saat menggunakan drawImage untuk menggambar kanvas, gambar yang akan digambar memiliki ukuran dan proporsi yang berbeda, jadi seperti tata letak html+css, isi dan sampul diperlukan untuk memenuhi kebutuhan yang berbeda.

Skalakan gambar sehingga sisi panjang gambar terlihat sepenuhnya dengan tetap mempertahankan rasio aspek. Dengan kata lain, gambar dapat ditampilkan secara utuh.

Jika gambar ditempatkan dalam persegi panjang kotak tetap sesuai dengan mode isi, gambar perlu diskalakan hingga batas tertentu.

Prinsipnya adalah:

Jika lebar dan tinggi gambar tidak sama, sehingga sisi panjang gambar dapat ditampilkan sepenuhnya, maka tinggi sisi gambar asli akan sama dengan sisi yang sesuai dengan kotak tetap setelah penskalaan, dan sisi lainnya. sisi akan ditemukan dalam proporsi yang sama.

Jika lebar dan tinggi gambar sama, maka lebar dan tinggi gambar yang diperkecil akan ditentukan menurut lebar dan tinggi kotak tetap. Jika lebar kotak tetap lebih besar dari tingginya, maka tingginya gambar yang diperskalakan akan sama dengan tinggi kotak tetap, dan sisi lainnya dapat ditemukan, dan sebaliknya.

 /** * @param {Nomor} sx tetap x koordinat kotak, sy tetap y subskrip kiri kotak* @param {Nomor} box_w lebar kotak tetap, box_h tinggi kotak tetap* @param {Nomor} source_w gambar asli Lebar, source_h tinggi gambar asli* @return {Objek} {parameter drawImage, koordinat x, koordinat y, lebar dan tinggi gambar yang diskalakan}, sesuai dengan drawImage(imageResource, dx, dy, dWidth, dHeight) */ fungsi mengandungImg(sx, sy, box_w, box_h, source_w, source_h ) { var dx = sx, dy = sy, dLebar = kotak_w, dTinggi = kotak_h; if(source_w > source_h || (source_w == source_h && box_w < box_h)){ dTinggi = source_h*dWidth/source_w; dy = sy + (box_h-dHeight)/2; }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){ dLebar = source_w*dHeight/source_h; dx = sx + (box_w-dWidth)/2; } kembali{ dx, dy, dWidth, dHeight } } var c=document.getElementById(myCanvas); ctx.fillStyle = '#e1f0ff'; //Perbaiki posisi dan ukuran kotak - gambar harus ditempatkan di kotak ini ctx.fillRect(30, 30, 150, 200); var img = new Image(); .log( img.lebar,img.tinggi); var imgRect = berisiImg(30,30,150,200,img.lebar,img.tinggi); console.log('imgRect',imgRect); ctx.drawImage(img, imgRect.dx, ​​​​imgRect.dy, imgRect.dWidth, imgRect.dHeight); //Catatan: Dalam mode pramuat img, onload harus ditempatkan di atas nilai yang ditetapkan ke src untuk menghindari kejadian onload tidak dapat dipicu ketika sudah ada cache, sehingga kejadian di onload tidak dieksekusi.

Skalakan gambar sambil mempertahankan rasio aspek sehingga hanya sisi pendek gambar yang terlihat sepenuhnya. Artinya, gambar biasanya selesai hanya pada arah horizontal atau vertikal, dan kliping akan terjadi pada arah lainnya.

prinsip:

Ambil bagian gambar sesuai dengan proporsi kotak tetap

 /** * @param {Nomor} box_w lebar kotak tetap, box_h tinggi kotak tetap* @param {Nomor} source_w lebar gambar asli, source_h tinggi gambar asli* @return {Object} {informasi gambar yang dicegat}, Sesuai dengan drawImage(imageResource , sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) parameter*/ fungsi coverImg(kotak_w, kotak_h, sumber_w, sumber_h){ var sx = 0, sy = 0, sLebar = sumber_w, sTinggi = sumber_h; if(sumber_w > sumber_h || (sumber_w == sumber_h && kotak_w < kotak_h)){ sLebar = kotak_w *sTinggi/kotak_h; sx = (source_w-sWidth)/2; }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){ sHeight = box_h*sWidth/box_w; sy = (source_h-sHeight)/2; sx, sy, lebar, tinggi } } var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff'; //Perbaiki posisi dan ukuran kotak--gambar perlu ditempatkan di kotak ini ctx .fillRect(30 , 30, 150, 200); var img = Gambar baru(); img.onload = fungsi () { console.log(img.width,img.height); var imgRect = coverImg(150.200,img.width,img.height); console.log('imgRect',ctx.drawImage(img, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 30, 30, 150, 200); } img.src = ./timg2.jpg; //Catatan: Dalam mode pramuat img, onload harus ditempatkan di atas nilai yang ditetapkan ke src untuk menghindari peristiwa onload tidak dapat dipicu ketika ada sudah menjadi cache. Akibatnya, kejadian di onload tidak dijalankan.

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