طريقة تنفيذ تحكم في حجم الصورة وتنسيقها في JS [وظيفة التكيف بالتناسب]

هذا المثال يشرح كيفية استخدام JS لتحكم في حجم عرض الصور. يُشارك معكم للاستفادة، والتفاصيل كالتالي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>أحدثjavascript عرض الصور التلقائي بناءً على النسبة، تقليص الصور بناءً على النسبة</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
إذا (maxWidth ==0 && maxHeight==0){
Ratio = 1;
} آخره إذا (maxWidth==0){//
إذا (hRatio<1) Ratio = hRatio;
} آخره إذا (maxHeight==0){
إذا (wRatio<1) Ratio = wRatio;
} آخره إذا (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
إذا (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>
</head>
<body>
<br />
عرض الصورة الأصلية (534 X 800)<br />
onload="AutoResizeImage(0,0,this)<br />
<a href="//img.jbzj.com/file_images/article/201702/2017218121607044.jpg" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="[#0#]"/></a><br/><br />
1. بطول 250 تقليص، بدون تحديد الارتفاع، تقليص بنسبة<br />
onload="AutoResizeImage(250,0,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)" alt="[#1#]"/></a><br /><br />
2. بطول 250 تقليص، بدون تحديد عرض، تقليص بنسبة<br />
onload="AutoResizeImage(0,250,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)" alt="[#2#]"/></a><br /><br />
3. ضغط بناءً على الارتفاع 250 والمحيط 250 بنسبة<br />
onload="AutoResizeImage(250,250,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="[#3#]"/></a><br /><br />
4. ضغط غير متناسب للارتفاع والمحيط (400 X 512)،في هذه الحالة، يبقى الارتفاع ثابتًا وسيعتمد الطول تلقائيًا على نسبة الارتفاع.<br />
onload="AutoResizeImage(400,512,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)" alt="[#4#]"/></a><br /><br />
5. ضغط غير متناسب للارتفاع والمحيط (300 X 600)،في هذه الحالة، يبقى العرض ثابتًا وسيعتمد الطول تلقائيًا على نسبة العرض.<br />
onload="AutoResizeImage(300,600,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218121607044.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" alt="[#5#]"/></a><br /><br />
6. إذا كانت الارتفاع والعرض الأصلي للصورة أقل من الارتفاع والمحيط الأقصى للضغط، فإنها لن تتمدد لعرض الصورة (عرض الأصل)<br />
الصورة الأصلية 444 x 207،مضغوطة إلى 500 x 600،وستبقى عرضة كما هي<br />
onload="AutoResizeImage(500,600,this)"<br />
<a href="/" target="_blank"><img src="https://img.jbzj.com/file_images/article/201702/2017218122006996.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="[#6#]"/></a><br /><br />
</body>
</html>

شكل التشغيل كما يلي:

للمزيد من المعلومات حول جافا سكريبت، يمكن للقراء المهتمين التحقق من المقالات الخاصة على هذا الموقع: 'دليل كامل لتقنيات تعامل الصور بجافا سكريبت'، 'ملخص تقنيات التأثيرات والتقنيات بجافا سكريبت'، 'ملخص تقنيات الرسم بجافا سكريبت'، 'ملخص تقنيات البحث والتحليل بجافا سكريبت'، 'ملخص تقنيات الأخطاء والتصحيح بجافا سكريبت'، 'ملخص تقنيات البيانات والخوارزميات بجافا سكريبت'، 'ملخص تقنيات التدور بجافا سكريبت'، و 'ملخص تقنيات العمليات الرياضية بجافا سكريبت'.

آمل أن يساعدكم ما ذكرته في هذا المقال في تصميم برامج جافا سكريبت.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، حقوق النشر تخص المالك الأصلي، تم جمع المحتوى من قبل المستخدمين على الإنترنت الذين قاموا بتحميله بمفردهم، ويستخدم هذا الموقع فقط كوسيط، ولم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على الدليل، وسنقوم بإزالة المحتوى المزعوم بسرعة.

التعليمات الأساسية

تحب أن ترى