ابزار برش و تغییر اندازه تصاویر

سال‌هاست که در وبلاگ‌ها، مجله‌های آنلاین و ... از تصویری شاخص برای رساندن پیام یک پست استفاده می‌شود. این تصویر به خواننده کمک می‌کنه تا سر رشته‌ای از مطلبی که قرار هست بخونه را متوجه بشه. تصویری مرتبط با مطلب که ذهن خواننده رو برای شروع آماده می‌کنه. اما معمولا این تصویر شاخص بین وبلاگ‌نویس‌ها و مخصوصا وبلاگنویس‌های کلاسیک مورد استفاده قرار نمی‌گیره.

طراح‌ها و سازندگان قالب هم کمتر از این امکان استفاده می‌کنند و به تازگی در قالب جدید بیان با نام «نوین» و یا قالب‌های گالری عکس مثل «دوربین» از این قابلیت استفاده شده. همچنین بنده هم در قالب هیراکا که نوروز ۱۳۹۹ منتشر کردم از این قابلیت استفاده کردم.

به وبلاگ دوستانی که از قالب هیراکا استفاده می‌کردند سر زدم و متوجه مشکلی ساختاری در استفاده از امکان تصویر شاخص شدم. نویسنده، تصاویر شاخص را با هر ابعادی به پستش اضافه می‌کنه و قالب که بر اساس ابعاد مشخصی طراحی شده، به طول کامل، از نظم و هماهنگی خودش خارج شده و این قابلیت قالب بی استفاده رها میشه.

در عصر وبلاگ‌های کلاسیک، تصویر شاخص معنایی نداشت، اما با گسترش وب و محتوا، استفاده از تصاویر و مدیا تبدیل به یک نیاز شد و سرویس بیان در میانه این عصر بود که از توسعه بازماند و از امکان تصویر شاخص، تنها توانایی قرار دادن یک نشانی تصویر وجود داره و امکانی برای دریافت خروجی تصاویر با ابعاد و اندازه‌های مورد نیاز قالب وجود نداره و شما برای هر تصویر بایستی وارد برنامه ویرایش تصاویر مثل فوتوشاپ شده و اندازه‌ و نسبت‌های ابعاد را بر اساس نیاز قالب خودتون تنظیم و تولید کنین.

این مشکل رو در قالب‌های نوین و غیره هم میشه دید که تصاویر یا از کادر بیرون زده هستن یا کشیده شده دیده میشن و یا انقدر که اندازه بزرگ و حجم بالایی دارن که خیلی کند بارگزاری میشن. حل این مشکل موضوعی زیرساختی هست اما اینجا می‌خوام با استفاده از ابزاری که به ما امکان برش و تغییر اندازه تصاویر در نسبت‌های تصویری استاندارد رو میده، تا حد قابل قبولی این مشکل رو رفع کنم:

ابزار برش و تغییر اندازه تصاویر

نحوه استفاده از ابزار برش و تغییر اندازه

اولین نکته در مورد این ابزار اینه که تمامی عملیات بر روی دستگاه شما انجام میشه و تصویری که شما در اینجا آپلود می‌کنین، در حقیقت روی صفحه‌ی مرورگر شما آپلود میشه و این ابزار هیچ داده‌ای از شما جمع‌آوری نمی‌کنه و قدرت پردازشش هم بسته به قدرت دستگاه شماست. تصاویری با فرمت‌های png، jpg، jpeg و svg رو می‌تونین از دستگاه خودتون یا از یک نشانی آنلاین وارد ابزار کنین و خروجی عملیات شما یک فایل با فرمت jpg خواهد بود. پس شما به دو صورت می‌تونین تصاویرتون رو وارد ابزار کنین:
دکمه آپلود از دستگاه
 با فشردن یا کلیک این دکمه می‌تونین فایلی تصویری با فرمت‌های اشاره شده در بالا رو از دستگاه خودتون وارد ابزار کنین یا به اصطلاح آپلود کنین.

دکمه بارگذاری تصویر با نشانی آنلاین
با فشردن یا کلیک این دکمه پنجره مودالی براتون باز میشه که می‌تونین نشانی آنلاین تصویری با فرمت‌های بالا رو وارد ابزار کنین.
دقت کنین که در روش نشانی آنلاین تصویر سعی کنین که از فایل‌های تا حد امکان از سایت‌های آپلود تصاویر عمومی مثل بیان‌باکس، پیکوفایل و ... استفاده کنین چرا که ممکنه با خطای Cross-Origin Resource Sharing (CORS) روبرو بشین و امکان استفاده از تصویر رو نداشته باشین.
دکمه پیشنمایش و دانلود
با فشار دادن این دکمه، خروجی تغییرات و ویرایش شما و ابعاد تصویر خروجی به همراه دکمه‌ی دانلود فایل به نمایش در میاد.

دکمه‌ حالت حرکت دادن یا تغییر مکان
با فشردن این دکمه، امکان تغییر مکان یا حرکت دادن تصویر و همچنین کادر برش رو خواهید داشت.

دکمه حالت برش
با فشردن این دکمه امکان برش تصویر در قسمت‌های خارج از کادر برش پیشفرض رو بر اساس نسبت ابعاد انتخابی خواهید داشت.

تفاوت دکمه‌های برش و حرکت
تفاوت این دو حالت رو می‌تونین در تصویر متحرک بالا مشاهده کنین.

دکمه‌های زوم
از این دکمه‌ها می‌تونین برای بزرگنمایی و کوچک‌نمایی تصویرتون استفاده کنین.

نسبت ابعاد ۱ به ۱
بیشترین استفاده از این نسبت تصویر رو می‌تونین در فید اینستاگرام و پینترست ببینین که از ابعاد تصویر ۱ به یک استفاده می‌کنه و بهترین اندازه برای این نسبت ۱۰۸۰ × ۱۰۸۰ پیکسل هست.

نسبت ابعاد ۲ به ۳
بیشترین کاربرد این نسبت تصویر در پینترست قابل مشاهده و بهترین اندازه برای این نسبت هم ۱۰۰۰ × ۱۵۰۰ پیکسل هست.

نسبت عریض ۳ به ۲
نسبت‌های عریض به صورت عمومی استفاده‌ی بیشتری نسبت به ابعاد باریک دارن. نسبت ۳ به ۲ از جمله محبوب‌ترین نسبت‌ها بین عکاسان و دنیای چاپ عکس و بهترین اندازه برای این نسبت هم ۱۰۸۰ در ۷۲۰ پیکسل هست.

نسبت عریض ۴ به ۳
این نسبت و نسبت بعدی جزو محبوب‌ترین نسبت‌ها در دنیای تصاویر ویدیویی هست و اگر نیاز به دریافت خروجی برای کاور یک فایل ویدیویی دارین، از این نسبت استفاده کنین. همچنین بهترین اندازه در این نسبت ۱۰۲۴ در ۷۶۸ پیکسل هست.

نسبت عریض ۱۶ به ۹
نسبت ۱۶ به ۹ یکی از معروف‌ترین نسبت‌ها و از محبوب‌ترین نسبت‌ها بین دوست‌داران دنیای سینما و فیلم هست و معمولا مانیتورهای ما هم با این نسبت ساخته میشن. بهترین اندازه در این نسبت هم ۱۹۲۰ در ۱۰۸۰ پیکسل هست.

نسبت دلخواه
به کمک این دکمه می‌تونین برشی با نسبت دلخواه و آزاد داشته باشین و دیگر کادر برش شما محدود بر یک نسبت مشخص نیست.

دکمه‌های تغییر اندازه خروجی ابزار
این دکمه‌ها برای تغییر اندازه تصویر برش داده شده و خروجی ابزار هستن که به صورت پیش‌فرض در حالت «حد آزاد» قرار داره که هیچ محدودیتی در خروجی ایجاد نمی‌کنه و تصویر برش داده شده رو با اندازه‌ی اصلی، در خروجی به شما نمایش میده. اما دیگر دکمه‌ها به برش ما اندازه مشخصی میدن. اگر تصویر شما بزرگتر از ابعاد انتخابیتون باشه، تصویر رو کوچک کرده و دقیقا یک ضلع تصویر رو به اون اندازه در آورده و بدون تغییر نسبت، ضلع دیگر رو کوچک می‌کنه. اگر هم تصویر شما کوچکتر از اندازه انتخابی باشه، تصویر رو بزرگ‌تر کرده و در حقیقت می‌تونین برای افزایش ابعاد تصاویر کوچکتون ازش استفاده کنین.

همکاری در توسعه و گزارش خطا

ابزار برش و تغییر اندازه تصاویر در وبسایت «گیتهاب» و با مجوز «MIT» منتشر شده است. یکی از اهداف انتشار این ابزار کمک به توسعه‌ و بهبود محیط بلاگ بیان برای استفاده‌ی هر چه بیشتر و بهتر وبلاگ‌نویسان است و اگر شما نیز با این هدف موافق بوده و قصد همکاری در این پروژه را دارید می‌توانید به مخزن این قالب در گیتهاب مراجعه کرده و با ستاره دادن به پروژه، «Fork» کردن پروژه و افزودن ویژگی‌های جدید به آن و همچنین گزارش خطا در بخش «Issues» مخزن ابزار «برش و تغییر اندازه تصویر» در گیتهاب و همچنین در بخش کامنت‌های همین پست، به بهبود و گسترش یک قالب ساده و زیبا برای وبلاگ‌‌نویسان مختلف کمک کنید.

برچسب‌ها
پیشنهادهای آسمانم

تا حالا۶ تا نظر داشتیم!

محمدرضا ...

دست مریزاد واقعا ابزار خیلی خوب و کاربردی هستش :) خسته نباشی آقا محمدرضا!

۲۳ خرداد ۱۴۰۲
فدات محسن جان ... ❤️️🌱🙏
ابزار ساده‌ای هست ... از Cropper.js استفاده کردم و یک رابط برای استفاده ازش و میشه گفت آره ... کاربردش اهمیت داشت ... این بحث اندازه و برش تصاویری که توی پست‌ها و جاهای مختلف استفاده می‌کنیم، کلی کار می‌برد، بری اینجا و اینکارش بکنی و کلی ابزار دیگه که دست و پاگیرن هم کنارش هستن. هدفم این بود که یک مساله مشخص رو حل کنم.
۲۳ خرداد ۱۴۰۲

روزی هفت هشت بار دعاتون میکنم به خاطر این ابزار::)) دمتون گرم

۲۳ خرداد ۱۴۰۲
خداروشکر که به درد خورد ... مرسی از حمایت و محبتتون. 🌹🙏
۲۳ خرداد ۱۴۰۲

مرسی واقعا ابزار کاربردی هست 

۲۳ خرداد ۱۴۰۲
مرسی از حمایت و لطفتون ... 🙏🌹
امیدوارم براتون کاربرد داشته باشه 🌱
۲۴ خرداد ۱۴۰۲

بسیار عالی...خسته نباشید❤.

۲۹ خرداد ۱۴۰۲
درود بر شما ... مرسی از حمایتتون ... سلامت باشین 🙏🌱🌹
۲۹ خرداد ۱۴۰۲

چه ابزار جالبی

۱ تیر ۱۴۰۲
سلام ... وقت بخیر
مرسی ... امیدوارم به دردتون بخوره 🌱🌹
۲ تیر ۱۴۰۲

مثل همیشه عالی :)

 

۶ تیر ۱۴۰۲
مرسی از حمایت 🙏🌱🌹
۶ تیر ۱۴۰۲
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
چت درباره من تماس جعبه ابزارها آسمانی‌ساز لینک رسان موزیک‌ها 💙 برنامه وبلاگ CKEditor Quill TinyMCE Froala کانال آپارات