เมื่อใช้ DrawImage สำหรับการวาดภาพบนผืนผ้าใบ รูปภาพที่จะวาดจะมีขนาดและสัดส่วนที่แตกต่างกัน ดังนั้น เช่นเดียวกับเค้าโครง html+css จำเป็นต้องมีและหน้าปกเพื่อตอบสนองความต้องการที่แตกต่างกัน
บรรจุปรับขนาดรูปภาพเพื่อให้มองเห็นด้านยาวของรูปภาพได้เต็มที่โดยยังคงรักษาอัตราส่วนไว้ กล่าวอีกนัยหนึ่งคือสามารถแสดงรูปภาพได้อย่างสมบูรณ์
หากภาพถูกวางในสี่เหลี่ยมของกล่องคงที่ตามโหมดบรรจุ รูปภาพนั้นจะต้องมีการปรับขนาดในระดับหนึ่ง
หลักการคือ:
หากความกว้างและความสูงของรูปภาพไม่เท่ากัน เพื่อให้สามารถแสดงด้านยาวของรูปภาพได้เต็มที่ ด้านความสูงของรูปภาพต้นฉบับจะเท่ากับด้านที่สอดคล้องกับกล่องคงที่หลังจากการปรับขนาด และอีกด้านหนึ่ง ด้านข้างก็จะพบได้ในสัดส่วนที่เท่ากัน
หากความกว้างและความสูงของรูปภาพเท่ากัน ความกว้างและความสูงของรูปภาพที่ปรับขนาดจะถูกกำหนดตามความกว้างและความสูงของกล่องคงที่ หากความกว้างของกล่องคงที่มากกว่าความสูง ความสูงของกล่องคงที่ ภาพที่ปรับขนาดจะเท่ากับความสูงของกล่องคงที่และสามารถหาอีกด้านหนึ่งได้ตามลำดับและในทางกลับกัน
/** * @param {Number} sx พิกัด x คงที่ของกล่อง, sy แก้ไข y ตัวห้อยด้านซ้ายของกล่อง* @param {Number} box_w ความกว้างคงที่ของกล่อง, box_h ความสูงคงที่ของกล่อง* @param {Number} source_w ภาพต้นฉบับ ความกว้าง, ความสูงของ source_h ของภาพต้นฉบับ* @return {Object} {พารามิเตอร์ของ DrawImage, พิกัด x, พิกัด y, ความกว้างและความสูงของภาพที่ปรับขนาด} ซึ่งสอดคล้องกับ DrawImage(imageResource, dx, dy, dWidth, dHeight) */ function containsImg(sx, sy, box_w, box_h, source_w, source_h ) { var dx = sx, dy = sy, dWidth = box_w, dHeight = box_h; if(source_w > source_h || (source_w == source_h && box_w < box_h)){ dHeight = source_h*dWidth/source_w; dy = sy + (box_h-dHeight)/2; } อื่น ๆ ถ้า (source_w < source_h || (source_w == source_h && box_w > box_h)){ dWidth = source_w*dHeight/source_h; dx = sx + (box_w-dWidth)/2; } กลับ{ dx, dy, dWidth, dHeight } } var c=document.getElementById(myCanvas); ctx.fillStyle = '#e1f0ff'; //แก้ไขตำแหน่งและขนาดของกล่อง - ต้องวางรูปภาพลงในช่องนี้ ctx.fillRect(30, 30, 150, 200); var img = new Image(); img.onload = function () { console .log( img.width,img.height); var imgRect = containsImg(30,30,150,200,img.width,img.height); console.log('imgRect',imgRect); ctx.drawImage(img, imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight); } img.src = ./timg2.jpg; //หมายเหตุ: ในโหมดการโหลดล่วงหน้า img ควรวาง onload ไว้เหนือค่าที่กำหนดให้กับ src เพื่อหลีกเลี่ยงไม่ให้เหตุการณ์ onload ไม่สามารถถูกทริกเกอร์ได้เมื่อมีแคชอยู่แล้ว ส่งผลให้เหตุการณ์ใน onload ไม่ได้ถูกดำเนินการ ปิดบังปรับขนาดรูปภาพโดยคงอัตราส่วนไว้เพื่อให้มองเห็นเฉพาะด้านสั้นของรูปภาพได้ทั้งหมด นั่นคือภาพมักจะสมบูรณ์ในทิศทางแนวนอนหรือแนวตั้งเท่านั้น และการตัดจะเกิดขึ้นในทิศทางอื่น
หลักการ:
จับภาพบางส่วนของภาพตามสัดส่วนของกล่องคงที่
/** * @param {Number} box_w ความกว้างของกล่องคงที่, box_h ความสูงของกล่องคงที่* @param {Number} source_w ความกว้างของรูปภาพต้นฉบับ, source_h ความสูงของรูปภาพต้นฉบับ* @return {Object} {ข้อมูลรูปภาพที่ถูกดัก}, สอดคล้องกับ DrawImage (imageResource , sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) พารามิเตอร์*/ ฟังก์ชัน coverImg (box_w, box_h, source_w, source_h){ var sx = 0, sy = 0, sWidth = source_w, sHeight = source_h; if(source_w > source_h || (source_w == source_h && box_w < box_h)){ sWidth = box_w *sHeight/box_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; } กลับ{ sx, sy, sWidth, sHeight } } var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff'; //แก้ไขตำแหน่งและขนาดของกล่อง--ต้องวางรูปภาพลงในกล่องนี้ ctx .fillRect(30 , 30, 150, 200); var img = รูปภาพใหม่ (); img.onload = ฟังก์ชั่น () { console.log(img.width,img.height); var imgRect = coverImg(150,200,img.width,img.height); console.log('imgRect',imgRect); imgRect.sy, imgRect.sWidth, imgRect.sHeight, 30, 30, 150, 200); } img.src = ./timg2.jpg; //หมายเหตุ: ในโหมดการโหลดล่วงหน้า img ควรวาง onload ไว้เหนือค่าที่กำหนดให้กับ src เพื่อหลีกเลี่ยงไม่ให้เหตุการณ์ onload ไม่สามารถถูกทริกเกอร์ได้เมื่อมี เป็นแคชอยู่แล้ว ดังนั้น เหตุการณ์ใน onload จะไม่ถูกดำเนินการข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network