عند استخدام 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) */ وظيفة تحتوي على Img(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 }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){ dWidth = source_w*dHeight/source_h; dx = sx + (box_w-dWidth)/2 } return{ 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; .log( img.width,img.height); var imgRect = contImg(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، يجب وضع التحميل فوق القيمة المخصصة لـ src لتجنب عدم القدرة على تشغيل حدث التحميل عندما تكون هناك ذاكرة تخزين مؤقت بالفعل، مما يؤدي إلى عدم تنفيذ الحدث أثناء التحميل. غطاءقم بقياس الصورة مع الحفاظ على نسبة العرض إلى الارتفاع بحيث يكون الجانب القصير فقط من الصورة مرئيًا بالكامل. أي أن الصورة عادةً ما تكتمل فقط في الاتجاه الأفقي أو الرأسي، وسيتم إجراء القطع في الاتجاه الآخر.
مبدأ:
التقط جزءًا من الصورة وفقًا لنسبة المربع الثابت
/** * @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; *sHeight/box_h; (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, sWidth, sHeight } } var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff'; // إصلاح موضع الصندوق وحجمه - يجب وضع الصورة في هذا المربع ctx .fillRect(30 , 30, 150, 200); var img = new Image(); img.onload = function () { console.log(img.width,img.height); var imgRect = CoverImg(150,200,img.width,img.height); console.log('imgRect',imgRectImage(img, imgRect.sx, imgRect.sy، imgRect.sWidth، imgRect.sHeight، 30، 30, 150, 200); } img.src = ./timg2.jpg; // ملاحظة: في وضع التحميل المسبق لـ img، يجب وضع التحميل فوق القيمة المخصصة لـ src لتجنب عدم القدرة على تشغيل حدث التحميل عندما يكون هناك بالفعل ذاكرة تخزين مؤقت، ونتيجة لذلك، لا يتم تنفيذ الأحداث قيد التحميل.ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.