نقل المعلومات اللازمة إلى العملاء المطلوبين. المشكلة الرئيسية في المبيعات هي عدم القدرة على نقل قيمتك للعملاء. كيف تتحدث بشكل صحيح عن منتج أو خدمة

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

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

الطريقة الأولى: استخدام الهوامش السلبية

يجب وضع الصورة في العنصر الأصلي، في حالتنا div. يجب أن يكون العنصر الأصلي عنصرًا عائمًا (أو بعرض محدد). لن تعمل الطريقة على العناصر ذات مستوى الكتلة أو ذات العرض الكامل.

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

<فئة div = "اقتصاص">

اقتصاص

تعويم: اليسار؛

إخفاء الفائض؛

صورة المحاصيل

الهامش: -70px -50px -160px -175px ؛

الطريقة الثانية: استخدام تحديد المواقع المطلق

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

<فئة div = "اقتصاص">

اقتصاص

تعويم: اليسار؛

إخفاء الفائض؛

الموقف: نسبي؛

العرض: 270 بكسل؛

الارتفاع: 260 بكسل؛

صورة المحاصيل

الموقف: مطلق؛

أعلى: -70 بكسل؛

اليسار: -175 بكسل؛

الطريقة الثالثة: استخدام خاصية الانزلاق

هذه الطريقة هي الأبسط، حيث أن خاصية المقطع تحدد جزء العنصر الذي يجب إظهاره. لكن هذه الطريقة لها عيبان.

أولاً، يجب وضع العنصر الذي تم اقتصاصه بشكل مطلق. لذلك سيتعين علينا إضافة عنصر إضافي، وحساب حجم المنطقة المرئية من الصورة، وإضافة هذا الحجم، وتعيين الخاصية float على الأصل.

ثانيًا، لا يتم تقليل حجم المنطقة المرئية إلى حجم الجزء المقطوع، ولكنه يظل مساويًا لحجم الصورة بأكملها (المساحة خارج الجزء المقطوع تكون مخفية فقط). يجب علينا استخدام الموضع المطلق لتحريك المنطقة المرئية إلى الزاوية اليسرى العليا من الأصل.

<فئة div = "اقتصاص">

اقتصاص

تعويم: اليسار؛

الموقف: نسبي؛

تعرف على كيفية تغيير حجم الصور واقتصاصها باستخدام JavaScript وعنصر HTML5 Canvas، باستخدام عناصر التحكم التي رأيتها في تطبيقات تحرير الصور:

سأوضح لك في هذه المقالة كيفية تغيير حجم الصور واقتصاصها باستخدام عنصر HTML5

في بيئة حية، قد يستخدم موقع ويب أو تطبيق هذه التقنية لتغيير حجم وإنشاء صورة الملف الشخصي قبل التحميل.

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

للقيام بذلك سوف نقوم بإنشاء عنصر HTML5

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

يمكن أن يؤدي تغيير حجم الصور الكبيرة جدًا إلى إبطاء المتصفح، أو في بعض الحالات حتى تعطل التطبيق. ولذلك، فمن المنطقي وضع حدود معقولة لحجم الملف الذي يمكن تحميله. إذا كانت الجودة مهمة بالنسبة لك، فقد تجد هذه التقنية غير عملية لأن المتصفح سيقلل من جودة الصورة أثناء المعالجة.

موجود عدد من التقنيات التي يمكن استخدامها لزيادة جودة الصور المقاسة من القماشلكننا لن نتناولها في هذا المقال.

يمكنك رؤية النتيجة النهائية في هذا العرض التوضيحي، أو يمكنك تنزيل أرشيف ZIP.

حسنا، الآن دعونا نبدأ!

العلامات

في العرض التوضيحي الخاص بنا، سنبدأ بصورة موجودة:

هذا كل شئ! هذا هو كل HTML الذي سنحتاجه لهذا العرض التوضيحي.

CSS

CSS أيضًا صغير جدًا. أولاً، دعونا نحدد الأنماط لحاوية تغيير الحجم والصورة:

حاوية تغيير الحجم ( الموضع: نسبي؛ العرض: كتلة مضمنة؛ المؤشر: نقل؛ الهامش: 0 تلقائي؛ ) . حاوية تغيير الحجم img ( عرض: كتلة ) . حاوية تغيير الحجم: تحويم img، حاوية تغيير الحجم: img نشطة ( المخطط التفصيلي: 2 بكسل rgba متقطع (222,60,80,.9 )

تغيير حجم المقبض-ne، .resize-handle-ne، .resize-handle-se، .resize-handle-nw، .resize-handle-sw ( الموضع: مطلق؛ العرض: كتلة؛ العرض: 10px؛ الارتفاع: 10px؛ الخلفية: rgba(222,60,80,.9); مؤشر z: 999; (أسفل: -5px؛ يسار: -5px؛ المؤشر: sw-resize؛ ) .resize-handle-ne (أعلى: -5px؛ يمين: -5px؛ المؤشر: ne-resize؛ ) .resize-handle-se (أسفل : -5 بكسل؛ اليمين: -5 بكسل؛

جافا سكريبت

نبدأ جافا سكريبت بتعريف بعض المتغيرات وتهيئة اللوحة القماشية والصورة المستهدفة:

var resizeableImage = function(image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), events_state = (), constrain = false, min_width = 60, min_height = 60, max_width = 800، max_height = 900، resize_canvas = document.createElement("canvas" )); resizeableImage($(".resize-image"));

بعد ذلك نقوم بإنشاء دالة init والتي سيتم استدعاؤها فورًا عند التمهيد. تعمل هذه الوظيفة على تغليف الصورة في حاوية وإنشاء مقابض لتغيير الحجم وإنشاء نسخة من الصورة الأصلية المستخدمة لتغيير الحجم.

نقوم أيضًا بتعيين كائن JQuery لعنصر الحاوية إلى متغير حتى نتمكن من الوصول إليه لاحقًا وإضافة مستمع حدث mousedown الذي يكتشف متى يبدأ شخص ما في سحب أحد المقابض:

var resizeableImage = function(image_target) ( // ... init = function())( // إنشاء صورة جديدة بنسخة من src الأصلية // عندما نقوم بتغيير حجم الصورة، نستخدم دائمًا هذه النسخة كأساس orig_src .src=image_target.src ; // إضافة علامات تغيير الحجم $(image_target).wrap("

").قبل(" ").قبل(" ").بعد(" ").بعد(" "); // احصل على متغيرات للحاوية $container = $(image_target).parent(".resize-container"); // أضف أحداث $container.on("mousedown", ".resize-handle", startResize) ؛ )؛ //... فيه()؛

تخبر وظيفتا startResize وendResize المتصفح فقط ببدء تتبع مكان تحرك الماوس وإيقاف التتبع:

startResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove"، تغيير الحجم); $(document).on("mouseup"، endResize ); endResize = function(e)( e.preventDefault(); $(document).off("mouseup touchend"، endResize); $(document).off("mousemove touchmove"، تغيير الحجم); );

قبل أن نبدأ بتتبع موضع الفأرة، نحتاج إلى أخذ لقطة للأبعاد والبيانات الرئيسية الأخرى للحاوية.

نقوم بتخزينها في متغير يسمى events_state ونستخدمه لاحقًا كنقطة بداية عند تغيير الارتفاع والعرض:

saveEventState = function(e)( // احفظ المعلمات الأولية للحدث وحالة الحاوية events_state.container_width = $container.width(); events_state.container_height = $container.height(); events_state.container_left = $container .offset().left ; events_state.container_top = $container.offset().top; (); = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // هذا تصحيح لرحلات السفاري على الأجهزة المحمولة // لسبب ما، لا يمكن ذلك انسخ خصائص اللمس مباشرة if (typeof e.originalEvent.touches !== "undef")(event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob)(event_state.touches[i] = ( );event_state.touches [i].clientX = 0+ob.clientX;

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

نقوم بعد ذلك بإضافة خيار لتحديد حجم الصورة عند التبديل باستخدام مفتاح Shift أو متغير.

أخيرًا، نقوم بتغيير حجم الصورة، ولكن فقط إذا كان العرض والارتفاع الجديدان ضمن الحد الأدنى والحد الأقصى لقيم المتغيرات التي حددناها في البداية.

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

تغيير حجم الصورة الفعلية

يمكنك ببساطة رسم صورة باستخدام drawImage. نقوم أولاً بتعيين ارتفاع وعرض اللوحة القماشية ونستخدم دائمًا النسخة الأصلية من الصورة بالحجم الكامل. نستخدم بعد ذلك toDataURL على اللوحة القماشية للحصول على نسخة مشفرة Base64 من الصورة المعدلة مؤخرًا ووضعها على الصفحة.

يقدم القسم الخاص بالتقطيع شرحًا كاملاً لجميع الخيارات التي يمكن استخدامها مع طريقة drawImage:

resizeImage = function(width, height)( resize_canvas.width = width; resize_canvas.height = height; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, width, height); $(image_target).attr( "src"، resize_canvas.toDataURL("image/png") );

سهل جدا؟ هناك تحذير صغير: يجب استضافة الصورة على نفس المجال مثل الصفحة، أو على خادم به القدرة على التبادل مع مصادر مختلفة (CORS). وإلا قد تواجه مشاكل مع الأخطاء " قماش تالف«.

تغيير الحجم من زوايا مختلفة

يجب أن يكون لديك الآن نسخة تجريبية صالحة للعمل. ولكن هذا ليس كل شيء. على هذه اللحظة، فهو لا يعمل حتى الآن بحيث يتم تغيير الحجم كما لو كنا نسحب الزاوية اليمنى السفلية، بغض النظر عن الزاوية التي نغير حجم الصورة منها.

نحن بحاجة إلى أن نكون قادرين على تغيير حجم الصورة من أي زاوية. للقيام بذلك نحن بحاجة إلى فهم سلوك نموذجنا التجريبي.

عند تغيير الحجم، يجب أن تتحرك الزاوية التي نسحبها وكذلك الجوانب المجاورة لها، بينما يجب أن تظل الزاوية المقابلة والجوانب المجاورة لها في مكانها:

عندما نغير عرض الصورة وارتفاعها، ستتحرك الحواف اليمنى والسفلية، بينما ستبقى الحواف العلوية واليسرى في مكانها. وهذا يعني أنه يتم تغيير حجم الصور افتراضيًا من الزاوية اليمنى السفلية.

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

تغيير الحجم = الوظيفة (e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); يعتمد بشكل مختلف على الزاوية التي نسحبها if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - events_state.container_left; height = mouse.y - events_state .container_top; left =event_state.container_left;top =event_state.container_top) else if($(event_state.evnt.target).hasClass("resize-handle-sw"))( width = events_state.container_width - (mouse.x - events_state. Container_left); height = mouse.y -event_state.container_top; left = mouse.x; top =event_state.container_top; =event_state.container_width - (mouse.x -event_state.container_left height =event_state.container_height - (mouse.y -event_state.container_top); يسار = mouse.x; أعلى = mouse.y؛ if(constrain || e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) else if($(event_state.evnt.target).hasClass("resize" -handle-ne"))( width = mouse.x -event_state.container_left; height =event_state.container_height - (mouse.y -event_state.container_top); left=event_state.container_left;top= mouse.y;if(constrain | |.e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) // دعم نسبة العرض إلى الارتفاع بشكل اختياري if(constrain || e.shiftKey)( height = width / orig_src.width * orig_src.height ) إذا (width > min_width && height > min_height && width< max_width && height < max_height){ // Для увеличения производительности вы можете ограничить количество вызовов resizeImage() resizeImage(width, height); // Без этого Firefox не будет пересчитывать размеры изображения, пока перетаскивание не завершилось $container.offset({"left": left, "top": top}); } }

يتحقق الكود الخاص بنا الآن من مقبض تغيير الحجم الذي يتم سحبه ويحرك صورتنا بحيث تبدو الزاوية المقابلة ثابتة.

نقل صورة

الآن بعد أن أصبح بإمكاننا تغيير حجم الصورة عن طريق سحب أي من زواياها، ربما لاحظت أنه يمكننا تغيير موضع الصورة على الصفحة عن غير قصد.

نحتاج الآن إلى التأكد من عودة الصورة إلى منتصف الإطار. في الدالة init، دعنا نضيف متتبع أحداث آخر، مشابهًا للمتتبع الذي أنشأناه سابقًا:

init = function())( //... $container.on("mousedown", "img", startMoving); )

نضيف الآن الدالتين startMoving وendMoving، على غرار الطريقة التي أضفنا بها startResize وendResize:

startMoving = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", moving); $(document).on("mouseup", endMoving ); endMoving = function(e)( e.preventDefault(); $(document).off("mouseup"، endMoving); $(document).off("mousemove"، Moving); );

تحتاج وظيفة النقل إلى حساب موضع جديد للحافة اليسرى العلوية للحاوية. سيكون مساويًا لموضع الماوس الحالي، مع تعويضه بالمسافة من الزاوية اليسرى العليا إلى الماوس عندما بدأنا في سحب الصورة:

Moving = function(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); mouse .y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset(( "left": mouse.x - (event_state.mouse_x - events_state.container_left), "top" : mouse.y - (event_state.mouse_y - events_state.container_top) ));

اقتصاص صورة

الآن بعد أن أصبح بإمكاننا تغيير حجم الصورة، قد ترغب في اقتصاصها. بدلاً من منح المستخدمين خيار اقتصاص الصورة بأي حجم وشكل، فلنقم بإنشاء إطار يحتوي على الأبعاد الدقيقة التي نحتاجها وندعو المستخدمين إلى وضع الصورة داخل هذا الإطار.

سيكونون قادرين على تحديد حجم وموضع الإطار الذي تم اقتصاصه في الصورة الأصلية، ونحن بدورنا سنتأكد من أن الصورة النهائية ستكون دائمًا بنفس الشكل والحجم.

للقيام بذلك، نحتاج إلى إضافة كود HTML التالي:

تعد أنماط إطار التراكب مهمة جدًا، خاصة الموضع والعرض والارتفاع، حيث يتم استخدامها لتحديد مقدار الصورة التي سيتم اقتصاصها.

من المهم أيضًا أن تتذكر أن الإطار يجب أن يكون مرئيًا دائمًا على خلفية من أي لون. لهذا السبب استخدمت في مثالي مخططًا أبيضًا شبه شفاف حول النافذة الرئيسية:

التراكب (الموضع: مطلق؛ اليسار: 50%؛ الأعلى: 50%؛ الهامش الأيسر: -100 بكسل؛ الهامش العلوي: -100 بكسل؛ الفهرس z: 999؛ العرض: 200 بكسل؛ الارتفاع: 200 بكسل؛ الحد: 2 بكسل rgba( 222،60،80،.9)؛ حجم الصندوق: مربع المحتوى؛ أحداث المؤشر: لا شيء؛ .overlay: after، .overlay: before (المحتوى: ""؛ الموضع: مطلق؛ العرض: كتلة؛ العرض: 204 بكسل الارتفاع: 40 بكسل؛ الحد الأيسر: متقطع 2 بكسل rgba(222,60,80,.9); الهامش العلوي: -40 بكسل) .تراكب: بعد (أسفل: 0؛ الهامش الأيسر: -2 بكسل؛ الهامش السفلي: -40 بكسل؛) .تراكب داخلي:بعد، .تراكب -داخلي:قبل (المحتوى: ""؛ الموضع: مطلق؛ العرض: العرض: 40 بكسل؛ الارتفاع: 204 بكسل؛ الحد العلوي: متقطع 2 بكسل rgba(222,60,80,.9); .التراكب الداخلي: قبل ( اليسار: 0؛ الهامش الأيسر: -40 بكسل؛ الهامش العلوي: -2 بكسل؛ ) .التراكب الداخلي: بعد ( اليمين: 0؛ الهامش الأيمن: -40 بكسل؛ الهامش العلوي: -2px) .btn-crop (الموضع: مطلق؛ محاذاة رأسية: أسفل؛ اليمين: 5 بكسل؛ أسفل: 5 بكسل؛ الحشو: 6 بكسل 10 بكسل؛ مؤشر z: 999؛ لون الخلفية: rgb(222,60,80); الحدود: لا شيء؛ نصف قطر الحدود: 5 بكسل؛ اللون: #FFF؛ )

أضف الوظيفة التالية ومتعقب الأحداث إلى JavaScript الخاص بك:

init = function())( //... $(".js-crop").on("click"، Crop); ); Crop = function())( var Crop_canvas, left = $(".overlay").offset().left - $container.offset().left, top = $(".overlay").offset().top - $container.offset().top, width = $(".overlay").width(), height = $(".overlay").height(); document.createElement("canvas"); = width; Crop_canvas.height = height; Crop_canvas.getContext("2d").drawImage(image_target, left, top, width, height, 0, 0, width, height); بي إن جي"))؛ )

تشبه وظيفة الاقتصاص وظيفة resizeImage، ولكن بدلاً من تمرير قيمة الارتفاع والعرض، نحصل على الارتفاع والعرض من عنصر التراكب.

تتطلب طريقة drawImage الخاصة باللوحة تسع معلمات للاقتصاص. المعلمة الأولى هي مصدر الصورة. تشير المعلمات الأربع التالية إلى مقدار الصورة الأصلية المستخدمة (مربع القطع). تشير المعلمات الأربع الأخيرة إلى مكان عرض الصورة وحجمها على اللوحة القماشية.

إضافة أحداث اللمس

بالنسبة إلى mousedown وmouseup، هناك أحداث لمس مكافئة - touchstart وtouchend، بالنسبة إلى mousemov يوجد حدث touchmove مكافئ. ومن الواضح أن من سمى هذه الأحداث كان يفتقر إلى حس الفكاهة، وإلا لكان قد أطلق عليها اسم "الهبوط" و"اللمس".

دعونا نضيف touchstart و touchend أينما كان لدينا mousedown و mouseup ، ونستبدل mousemove بـ touchmove :

// في init()... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("mousedown touchstart", "img", startMoving); // في startResize() ... $(document).on("mousemove touchmove", moving); $(document).on("mouseup touchend", endMoving); // في endResize()... $(document).off("mouseup touchend"، endMoving); $(document).off("mousemove touchmove", Moving); // في startMoving()... $(document).on("mousemove touchmove", moving); $(document).on("mouseup touchend", endMoving); //في endMoving()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", Moving);

نظرًا لأننا نقوم بتغيير حجم الصورة، فمن العدل أن نتوقع أن بعض المستخدمين سيرغبون في استخدام الإجراءات الشائعة مثل توسيع الصورة. توجد مكتبة Hammer تحتوي على العديد من الأدوات الملائمة للعمل مع أحداث اللمس.

ولكن بما أننا نحتاج فقط إلى التمدد، فيمكننا الاستغناء عنه. سأوضح لك الآن مدى سهولة إنشاء امتداد دون استخدام مكتبة تابعة لجهة خارجية.

ربما لاحظت أن وظيفة saveEventState تقوم بالفعل بتخزين بيانات اللمس الأصلية؛ سنحتاج هذا الآن.

أولاً، نتحقق مما إذا كان الحدث يحتوي على "لمستين" ونقيس المسافة بينهما. نحددها على أنها المسافة الأولية، ثم نقيس مدى تغير هذه المسافة أثناء تحركنا. دعونا نقوم بتحديث وظيفة الحركة:

Moving = function(e)( var mouse=(), touches; e.preventDefault(); e.stopPropagation(); touches = e.originalEvent.touches; mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop(); $container.offset(" left": mouse.x - (event_state.mouse_x - events_state.container_left)، "top": mouse.y - (event_state.mouse_y - events_state.container_top) )); // تتبع التمدد أثناء التحرك if(event_state.touches && events_state .touches.length > 1 && touches.length > 1)( var width = events_state.container_width, height = events_state.container_height; var a = events_state.touches.clientX - events_state.touches.clientX; a = a * a; var b = events_state.touches.clientY - events_state.touches.clientY; var dist1 = Math.sqrt(a + b); a = e.originalEvent.touches.clientX - touches.clientX a; - touches.clientY; b = b * b; نسبة فار = dist2 /dist1; العرض = العرض * النسبة؛ الارتفاع = الارتفاع * النسبة؛ // لتحسين الأداء، يمكنك تحديد عدد الاستدعاءات لـ resizeImage() resizeImage(width, height); )));

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

هذا كل شئ. شاهد النسخة التجريبية مرة أخرى أو قم بتنزيل أرشيف ZIP.

أثناء الاختبار، رأيت أن Chrome يمنع المتصفح الافتراضي من الاستجابة للتمدد، لكن Firefox يعمل بشكل جيد.

أتمنى أن تجد هذه المقالة مفيدة. أنا أشجعك على قراءة مقالات أخرى حول العناصر القابلة للسحب وطرق تحميل الملفات، ومعرفة كيف يجمع الأشخاص الآخرون بين هذه التقنيات لإنشاء واجهات مستخدم جميلة.

هذا المنشور هو ترجمة للمقال " تغيير حجم الصور واقتصاصها باستخدام القماش"، من إعداد فريق المشروع الصديق

في هذه المقالة، سنتعلم كيفية تغيير حجم الصور واقتصاصها باستخدام عنصر في HTML5، وأثناء قيامنا بذلك، دعونا نمنح عناصر التحكم تصميمًا أنيقًا تمامًا كما هو الحال في برامج تحرير الصور.

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

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

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

وتحقيقا لهذه الغاية، بدأنا العمل!

العلامات

في العرض التوضيحي الخاص بنا، سنعمل مع صورة واحدة محددة:

الجميع! لا نحتاج إلى أي HTML آخر.

CSS

لن يكون رمز CSS كبيرًا جدًا أيضًا. دعونا نحدد الأنماط لحاوية تغيير الحجم والصورة نفسها.

لنقم الآن بتعيين المواضع والأنماط لكل "مقابض تغيير الحجم". وهي عبارة عن مربعات صغيرة موجودة في زوايا الصور نقوم بسحبها لتغيير حجم الصورة.

جافا سكريبت

لنبدأ بإنشاء متغير ولوحة قماشية في Canvas.

لنقم الآن بإنشاء وظيفة تشغيل سيتم تشغيلها على الفور. تعمل هذه الوظيفة مع الحاوية التي توجد بها الصورة، وتقوم بتعيين الحجم ونسخ الصورة الأصلية لاقتصاصها. نقوم أيضًا بتعيين كائن jQuery حتى نتمكن من الرجوع إليه لاحقًا واستخدام عوامل تحريك الماوس للرد على عمليات سحب الماوس.

var resizeableImage = function(image_target) ( // ... init = function())( // أنشئ صورة جديدة بنسخة من src الأصلية // عند تغيير الحجم، سنستخدم دائمًا هذه النسخة الأصلية كقاعدة orig_src. src =image_target.src; // إضافة مقابض تغيير الحجم $(image_target).wrap("

").قبل(" ").قبل(" ").بعد(" ").بعد(" "); // احصل على متغير لحاوية $container = $(image_target).parent(".resize-container"); // إضافة أحداث $container.on("mousedown", ".resize-handle", startResize); ); //... فيه()؛ )

تخبر وظيفتا startResize وendResize المتصفح متى يبدأ في الانتباه إلى حركة الماوس ومتى يتوقف.

StartResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove"، تغيير الحجم); $(document).on("mouseup"، endResize ); endResize = function(e)( e.preventDefault(); $(document).off("mouseup touchend"، endResize); $(document).off("mousemove touchmove"، تغيير الحجم); );

قبل البدء في تتبع الماوس، يجب عليك فحص إعدادات العميل الحالية عند طلب صفحة. نقوم بتخزينها في المتغير events_state ونستخدمها لاحقا في عملنا.

SaveEventState = function(e)( // احفظ تفاصيل الحدث الأولي وحالة الحاوية events_state.container_width = $container.width(); events_state.container_height = $container.height(); events_state.container_left = $container.offset(). left; (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // هذا إصلاح لرحلات السفاري المحمولة // لسبب ما، لا يسمح بالنسخ المباشر من خاصية اللمسات if(typeof e.originalEvent.touches !== "undef")(event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob)(event_state.touches[i] = ( );event_state.touches[i].clientX = 0+ob.clientX;

وظيفة تغيير الحجم هي الأكثر أهمية. يتم تنشيطه عند تمديد الصورة. في كل مرة نقوم بحساب أحجام صور جديدة اعتمادًا على الموضع الجديد للمربعات.

بعد ذلك، سنضيف خيارًا لتحديد حجم الصورة باستخدام مفتاح Shift أو متغير.

ملحوظة: نظرًا لأننا نقوم بالفعل بتغيير حجم الصورة بدلاً من إعطائها طولًا وارتفاعًا جديدًا، فمن المفيد التفكير في مقدار ما يمكننا استخدامه من وظيفة resizeImage للتحكم في أداء الخادم.

أحجام الصور الجديدة

يعد رسم الصور في Canvas أمرًا سهلاً مثل drawImage . نضبط ارتفاع الصورة وطولها، ثم نقدم النسخة الأصلية. نستخدم أيضًا toDataURL للحصول على نسخة مشفرة بـ Base64 من نتيجة العملية.

يتم توفير شرح كامل للخيارات المتاحة لهذه العملية.

ResizeImage = function(width, height)( resize_canvas.width = width; resize_canvas.height = height; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, width, height); $(image_target).attr( "src"، resize_canvas.toDataURL("image/png") );

سهل جدا؟ هناك تحذير واحد: يجب أن تتم استضافة الصورة على نفس النطاق مثل صفحتنا، أو . إذا لم يكن الأمر كذلك، فستواجه مشاكل مع "اللوحة الملوثة".

زيادة من خلال القمم الأخرى

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

عندما نقوم بتمديد الصورة، يجب أن تتحرك الزوايا المجاورة للزاوية المثبتة أيضًا، ولكن يجب تثبيت الطرف المقابل من الصورة.

يمكننا تغيير الكود بحيث يتغير عندما يتم تمديد الصورة بأي زاوية. لنقم بتحديث وظيفة تغيير الحجم:

تغيير الحجم = الوظيفة(e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); بشكل مختلف اعتمادًا على الزاوية التي يتم سحبها والقيود if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - events_state.container_left; height = mouse.y - events_state.container_top ; left = events_state.container_left; .container_left); height = mouse.y - events_state.container_top; left = mouse.x; top = events_state.container_top; else if($(event_state.evnt.target).hasClass("resize-handle-nw")) ( width =event_state.container_width - (mouse.x -event_state.container_left height=event_state.container_height - (mouse.y -event_state.container_top); يسار = mouse.x; أعلى = mouse.y؛ if(constrain || e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) else if($(event_state.evnt.target).hasClass("resize" -handle-ne"))( width = mouse.x -event_state.container_left; height =event_state.container_height - (mouse.y -event_state.container_top); left=event_state.container_left;top= mouse.y;if(constrain | |.e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) // اختياريًا الحفاظ على نسبة العرض إلى الارتفاع if(constrain || e.shiftKey)( height = width / orig_src.width * orig_src.height ) إذا (width > min_width && height > min_height && width< max_width && height < max_height){ // To improve performance you might limit how often resizeImage() is called resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

الآن نتحقق من مقبض تغيير الحجم الذي تم استخدامه ونطبق التغييرات اللازمة.

نقل صورة

الآن بعد أن أصبح بإمكاننا تغيير حجم الصورة، ربما لاحظت أنها في بعض الأحيان "تتحرك للخارج". من الضروري إضافة القدرة على نقل كائن إلى وسط الإطار. دعونا نوسع وظيفة التهيئة لدينا قليلاً.

Init = function())( //... $container.on("mousedown", "img", startMoving); )

الآن نضيف وظائف startMoving وendMoving، على غرار startResize وendResize.

StartMoving = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", moving); $(document).on("mouseup", endMoving ); endMoving = function(e)( e.preventDefault(); $(document).off("mouseup"، endMoving); $(document).off("mousemove"، Moving); );

في الدالة المتحركة يجب علينا تحديد موضع المربع الأيسر العلوي. يجب أن يكون مساوياً للأول مع إزاحة صغيرة محسوبة من حركة المربعات الأخرى.

اقتصاص صورة

الآن بعد أن تعلمنا كيفية تغيير الحجم، نحن بحاجة إلى إضافة اقتصاص الصورة. بدلاً من ترك المستخدمين يعانون من أحجام الاقتصاص، فلنقم فقط بإنشاء إطار يجب وضعه في المكان المناسب وسيتم قص كل شيء حوله. وهذا سيمنحهم الفرصة لتعديل الصورة كيفما يريدون، وفي نفس الوقت جعل الصور الناتجة موحدة في الحجم.

للقيام بذلك، تحتاج إلى إضافة كود HTML التالي:

من المهم أن تتذكر أن الإطار يجب أن يكون دائمًا بلون مختلف عن خلفية الصفحة، وإلا فقد تنشأ مشاكل.

لنقم أيضًا بتحديث كود JavaScript:

Init = function())( //... $(".js-crop").on("click"، Crop); ); Crop = function())( var Crop_canvas, left = $(".overlay").offset().left - $container.offset().left, top = $(".overlay").offset().top - $container.offset().top, width = $(".overlay").width(), height = $(".overlay").height(); document.createElement("canvas"); = width; Crop_canvas.height = height; Crop_canvas.getContext("2d").drawImage(image_target, left, top, width, height, 0, 0, width, height); بي إن جي"))؛ )

وظيفة الاقتصاص مشابهة لوظيفة resizeImage. والفرق الوحيد هو أننا نحصل على الأبعاد وموضع القطع من موضع الإطار.

للاقتصاص، تحتاج إلى تعيين تسعة معلمات لمشغل drawImage في اللوحة القماشية. الأول هو الصورة الأصلية. الأربعة التالية هي الأماكن المستخدمة للعملية. أربعة أخرى هي إحداثيات المكان الذي يجب أن تبدأ فيه الرسم على القماش، وحجم الصورة.

إضافة اللمس والتعرف على الإيماءات

لقد أنشأنا دعم الماوس. دعونا لا نحرم أنفسنا من الاهتمام و أجهزة محمولة.

بالنسبة إلى mousedown وmouseup، هناك عوامل تشغيل مكافئة - touchstart وtouchend، وبالنسبة إلى mousemove يوجد touchmove. يجب أن تكون حريصًا على عدم الخلط بينهما وبين اللمس والهبوط (وإلا سيكون الأمر مضحكًا).

دعونا نضيف touchstart و touchend أينما كان لدينا mousedown و mouseup مع touchmove أينما كان لدينا mousemove .

نظرًا لأننا قمنا بتوصيل الأجهزة المحمولة، فمن المحتمل أن يستخدم المستخدم إيماءة "الضغط" على الصورة بأصابعه لتصغيرها. هناك مكتبة واحدة مريحة للغاية تسمى Hammer، والتي تتيح لك التعرف على العديد من الإيماءات. ولكن بما أننا نحتاج إلى واحد فقط، فسنكتبه بإيجاز دون أي نصوص إضافية.

ربما لاحظت أن وظيفة saveEventState مخزنة بالفعل في معلومات اللمس. الآن سوف نحتاجها.

أولاً نتحقق من وجود "اللمستين" والمسافة بينهما. وننظر أيضًا إلى ما إذا كانت المسافة بينهما تقل أثناء تحركنا. الآن لنقم بتحديث الحركة:

Moving = function(e)( var mouse=(), touches; e.preventDefault(); e.stopPropagation(); touches = e.originalEvent.touches; mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop(); $container.offset(" left": mouse.x - (event_state.mouse_x - events_state.container_left)، "top": mouse.y - (event_state.mouse_y - events_state.container_top) )); // راقب إيماءة التكبير والتصغير أثناء التحرك if(event_state. اللمسات && events_state.touches.length > 1 && touches.length > 1)( var width = events_state.container_width, height = events_state.container_height; var a = events_state.touches.clientX - events_state.touches.clientX; a = a * a var b = events_state.touches.clientY - events_state.touches.clientY; var dist1 = Math.sqrt(a + b); ب؛ فار dist2 = Math.sqrt(a + b); نسبة فار = dist2 /dist1; العرض = العرض * النسبة؛ الارتفاع = الارتفاع * النسبة؛ // لتحسين الأداء، يمكنك تحديد عدد مرات استدعاء resizeImage() resizeImage(width, height); )));

وبناءً على هذه البيانات، نقوم بتصغير أو تكبير صورتنا وضبط ارتفاعها وطولها.

هذا كل شئ. يمكنك فتح

مرحبًا بالجميع، اسمي آنا بلوك واليوم سنتحدث عن كيفية قص الصور دون استخدام برامج الرسومات.

أين يمكن أن يكون هذا مفيدًا؟

بادئ ذي بدء، على المواقع التي من المرجح ألا يتم اقتصاص المحتوى الذي يحتوي على صور لأي كتلة محددة.

مثال صارخ: مدونة على ووردبريس.

لنفترض أنك تريد أن يكون لغلاف مقالتك نسبة عرض إلى ارتفاع تبلغ 1:1 (مربع). أفعالك:

قم بتنزيل الصورة المناسبة من الإنترنت؛
قم بقصه في Photoshop إلى النسب المطلوبة؛
نشر مقال.

عند زيارتك للموقع سوف ترى النتيجة التي توقعتها.

لكن لنفترض أنك نسيت قص الصورة بالفوتوشوب وقمت بتنزيل صورة عشوائية كغلاف من الإنترنت، فماذا سيحدث بعد ذلك؟! هذا صحيح، سوف ينكسر التخطيط. وإذا لم تكن قد استخدمت CSS على الإطلاق، فيمكن للصورة عالية الدقة أن تمنع عرض النص بالكامل. لذلك، من المهم معرفة كيفية اقتصاص الصور باستخدام أنماط CSS.

لنلقي نظرة حالات مختلفةكيف يمكن تنفيذ ذلك ليس فقط باستخدام CSS، ولكن أيضًا باستخدام SVG.

مثال 1

دعونا نحاول اقتصاص الصورة التي تم وضعها باستخدام صورة الخلفية. لنقم بإنشاء علامة HTML صغيرة

دعنا ننتقل إلى تصميم CSS. باستخدام صورة الخلفية، نضيف صورة، ونحدد الإطارات لصورتنا، ونركز الصورة باستخدام موضع الخلفية ونضبط حجم الخلفية:

JPG)؛ موقف الخلفية: مركز المركز؛ حجم الخلفية: الغلاف؛ العرض: 300 بكسل؛ الارتفاع: 300 بكسل؛ )

كانت هذه هي الطريقة الأولى والأبسط لاقتصاص الصورة. الآن دعونا نلقي نظرة على المثال الثاني.

مثال 2

لنفترض أنه لا يزال لدينا نفس حاوية الصندوق التي يوجد بداخلها علامة img مع صورة سنقوم الآن بتصميمها.

سنقوم أيضًا بتوسيط صورتنا بالنسبة للكائن الذي سنقوم بإنشائه. ونحن نستخدم خاصية نادرًا ما يتم استخدامها: object-fit .

Box ( الموضع: نسبي؛ الفائض: مخفي؛ العرض: 300 بكسل؛ الارتفاع: 300 بكسل؛ ) .box img ( الموضع: مطلق؛ أعلى: 50%؛ يسار: 50%؛ تحويل: ترجمة (-50%، -50%))؛ العرض: 300 بكسل؛ الارتفاع: 300 بكسل؛

في رأيي هذا هو أفضل طريقة. إنه مثالي للمدونات إذا كنت تستخدم صورًا ذات أبعاد مختلفة تمامًا للمشاركات.

يمكنك معرفة المزيد عن HTML وCSS هنا:

مثال 3

يمكننا أيضًا إنشاء اقتصاص للصور في الوقت الحالي إذا قمنا بإدراجها في عناصر SVG. لنأخذ دائرة كمثال. يمكننا إنشاء SVG باستخدام العلامات. قم بإنشاء علامة حدود svg تحتوي على علامة دائرة وعلامة نمط. في علامة النمط نكتب علامة الصورة. نحدد فيه سمة xlink:href ونضيف صورة. سنضيف أيضًا سمات العرض والارتفاع. ولكن هذا ليس كل شيء. سنحتاج إلى إضافة قيمة التعبئة. لكي يعتبر عملنا مكتملًا، سنضيف السمة المساعدة protectedAspectRatio إلى علامة الصورة، والتي ستسمح لنا بملء صورتنا "من البداية إلى النهاية" حول الدائرة بأكملها.

لا أستطيع أن أسمي هذه الطريقة عالمية. ولكن يمكن استخدامه في حالات استثنائية. على سبيل المثال، إذا لمسنا موضوع المدونة، فيمكن أن تتناسب هذه الطريقة بشكل مثالي مع الصورة الرمزية للمؤلف الذي يكتب المقال.

يمكنك معرفة المزيد عن HTML وCSS هنا:

نتائج:
لقد نظرنا إلى 3 طرق لاقتصاص الصور على مواقع الويب: استخدام صورة الخلفية، واستخدام علامة img وربطها بنمط svg مع تضمين الصور النقطية باستخدام علامة الصورة. إذا كنت تعرف أي طرق أخرى لاقتصاص صورة باستخدام SVG، فقم بمشاركتها في التعليقات. سيكون من المفيد ليس فقط بالنسبة لي، ولكن أيضًا للآخرين أن يعرفوا عنها.

لا تنس أن تطرح أسئلتك حول التخطيط أو تطوير الواجهة الأمامية من المتخصصين في FrontendHelp عبر الإنترنت.

عند إعداد الصور للويب، غالبًا ما يكون من الضروري قصها لتسليط الضوء على الأجزاء الضرورية من الصورة وقطع الأجزاء غير الضرورية. وبصرف النظر عن الأحكام الفنية البحتة، فإن هذا التشذيب، أو كما يطلق عليه أيضًا، الاقتصاص ضروري لتقليل حجم الملف. كلما كانت الصورة أصغر، قل حجم الملف الخاص بها، وزادت سرعة تحميلها على صفحة الويب.

كيفية إزالة الأجزاء غير الضرورية من الصورة

دعونا نرى كيف يتم إجراء الاقتصاص فعليًا عن طريق إزالة الشريط الأسود الضيق الموجود في الحافة السفلية للصورة، والذي لا يمكن تفتيحه بدرجة كافية. ويتم الاقتصاص باستخدام أداة خاصة، أداة الاقتصاص (C).

انقر فوق الزر Crop Tool (C) في لوحة Tools لتحديد هذه الأداة.

اضبط مؤشر الماوس على الشكل الموجود في الزاوية اليسرى العليا من الصورة.

انقر مع الاستمرار على زر الفأرة الأيسر.

دون تحرير زر الماوس الأيسر، حرك مؤشر الماوس إلى أسفل الحافة اليمنى للصورة بحيث لا يتضمن إطار التحديد المنقط الذي يظهر شريطًا أسود ضيقًا عند الحد السفلي للصورة.

الافراج عن زر الماوس الأيسر. سيتم قفل الإطار وستظهر علامات مربعة في زواياه ووسط الجوانب. سيتم تعتيم منطقة الصورة خارج إطار الاقتصاص، مما يشير إلى جزء الصورة الذي يتم اقتصاصه.

باستخدام هذه العلامات يمكنك ضبط وتدوير حدود الإطار. لتحريك إطار الاقتصاص، ما عليك سوى وضع مؤشر الماوس داخل المنطقة المحددة واسحبه إليها المساحة المطلوبة. لتغيير حجم المنطقة المحددة، قم بتحريك أحد مقابض الزوايا. إذا قمت بالضغط باستمرار على زر Shift أثناء التحرك، فسيتم الحفاظ على نسب المنطقة. لتدوير الإطار، ضع مؤشر الماوس، الذي سيأخذ شكل سهم منحني، خارج منطقة التحديد، ومن خلال تحريك الماوس، يمكنك الوصول إلى الموضع المناسب للإطار. لإلغاء الاقتصاص، ما عليك سوى الضغط على الزر Esc.

من خلال تحريك مقابض إطار التحديد، تأكد من أن إطار الاقتصاص يتضمن الصورة بأكملها، دون حساب الشريط الأسود الضيق الموجود عند الحد السفلي للصورة.

انقر نقرًا مزدوجًا داخل مربع الاقتصاص أو اضغط على الزر Enter. سيتم اقتصاص الصورة على طول الحدود المحددة.

كيفية تقليل حجم الصورة

ولكن حتى بعد الاقتصاص، تكون الصورة كبيرة جدًا بالنسبة لصفحة الويب. مع دقة شاشة تبلغ 800 × 600 بكسل (ووفقًا للإحصاءات، يعمل معظم مستخدمي الويب حاليًا بهذه الدقة)، تشغل الصورة مساحة كبيرة على الشاشة. بالإضافة إلى ذلك، سيكون ملف الصورة بهذا الحجم كبيرًا جدًا وسيستغرق تحميله وقتًا طويلاً. ولذلك، فإننا سوف نقوم بتقليل حجم الصورة، والذي بدوره سوف يقلل من حجم الملف.

حدد أمر القائمة صورة - حجم الصورة. يظهر مربع حوار حجم الصورة على الشاشة.

في الجزء العلوي من مربع الحوار، في مجموعة أجزاء التحكم Pixel Dimensions (الأبعاد بالبكسل)، تتم الإشارة إلى حجم الملف الحالي بتنسيق PSD - 400.3K، بالإضافة إلى العرض الحالي (العرض) والارتفاع (الارتفاع) لـ الصورة بالبكسل. قد تكون قيمك بعد الاقتصاص مختلفة قليلاً.

في مجموعة التحكم في حجم المستند، تتم الإشارة إلى حجم المستند بالسنتيمتر ودقة الرسم (الدقة). عند تعيين علامة Constrain Proportions، يحتفظ البرنامج تلقائيًا بنسب الصورة عند تغيير أحد الأبعاد - العرض أو الارتفاع.

عندما تقوم بتغيير حجم صورة في مجموعة Pixel Dimensions لأجزاء التحكم، فإن خصائصها للمستند تتغير وفقًا لذلك - إما أبعادها أو دقة الرسم، اعتمادًا على ما إذا كانت علامة Resample Image قد تم تحديدها أو مسحها. إذا تم تعيين هذه العلامة، يتغير حجم المستند، وبالتالي حجم ملف الصورة. إذا تم مسح العلامة، فيمكن تغيير أبعاد المستند فقط. مع كل هذا، ستتغير دقة الرسوميات وفقًا لذلك، وسيظل حجم الصورة بالبكسل وحجم الملف بدون تكوين.

عند تقليل البعد أو دقة الرسم أدوبي فوتوشوبيزيل المعلومات الزائدة عن الحاجة من الصورة، وعندما يتم زيادة هذه الخصائص، فإنه يشكل المعلومات المفقودة بناءً على قيم الألوان للبكسلات الموجودة. في كلتا الحالتين، يستخدم البرنامج إحدى طرق الاستيفاء الخمسة، والتي يمكن تحديدها في القائمة المنسدلة Resample Image.

نظرًا لأن الصورة التي نريد تغيير حجمها تم إنشاؤها للعرض على الشاشة، فلا ينبغي تغيير دقة الرسومات الخاصة بها.

تأكد من تحديد خانة الاختيار Resample Image للحفاظ على الدقة الرسومية للصورة وتغيير حجمها.

في حقل إدخال العرض لمجموعة Pixel Dimensions لأجزاء التحكم، أدخل قيمة جديدة لعرض الصورة بالبكسل - 300. ستتغير قيمة ارتفاع الصورة في حقل إدخال الارتفاع تلقائيًا، وكذلك حجم المستند في حجم المستند مجموعة أجزاء التحكم (حجم المستند). في الجزء العلوي من مربع الحوار، سترى أيضًا قيمة جديدة بحجم ملف مصغر وبجوارها، بين قوسين، المجلد السابق.

أغلق مربع الحوار "حجم الصورة" بالنقر فوق "موافق". سيتم استخدام الخصائص المحددة وسيتم تقليل حجم الصورة في نافذة المستند.

كيفية تجنب فقدان خصائص الصورة عند تغيير حجمها

كما أشرنا سابقًا، يؤدي تقليل أبعاد الصورة إلى إزالة المعلومات الزائدة عن الحاجة منها، مما يؤدي إلى انخفاض معين في الحدة. يمكن أن يؤدي استخدام مرشح Unsharp Mask إلى استعادة وضوح الصورة إلى حد معين.

حدد أمر القائمة Filter - Sharpen - Unsharp Mask (Filter - Sharpness - Contour Sharpness). سيظهر مربع الحوار Unsharp Mask على الشاشة.

حرك شريط تمرير المبلغ لاستعادة وضوح الصورة. يجب أن تكون قيمة هذه المعلمة في حدود 50-60٪.

انقر فوق "موافق" لإغلاق مربع حوار Urisharp Mask. سوف تصبح الصورة أكثر وضوحا.

احفظ المستند عن طريق تحديد أمر القائمة ملف - حفظ.

لأنه عند تغيير حجم الصورة، تنخفض جودتها بسبب إزالة المعلومات غير الضرورية، ويجب تجنب هذه العملية إن أمكن. إذا كنت تقوم بمسح صورة ضوئيًا، فمن الأفضل معرفة حجمها في هذه الخطوة وإجراء المسح الضوئي بدقة توفر أفضل جودة للعرض.