برش یک تصویر _

نحوه عملکرد برش تصویر در مرورگر

فرآیند برش کاملاً داخل برگه مرورگر شما با استفاده از Canvas API اجرا می‌شود. بدون پردازش سمت سرور، بدون آپلود، بدون سرویس‌های شخص ثالث. هر مرحله روی دستگاه شما انجام می‌شود.

1. تصویر را در یک عنصر <img> بارگذاری کنید تا مرورگر آن را به‌صورت محلی رمزگشایی کند. یک لایه Canvas تصویر را متناسب با نمای دید مقیاس‌بندی می‌کند در حالی که یک مستطیل انتخاب قابل کشیدن منطقه برش فعلی را نشان می‌دهد.
2. مستطیل را از لبه‌ها یا گوشه‌هایش بکشید تا ناحیه برش را تنظیم کنید. مستطیل در محدوده تصویر محبوس می‌ماند تا نتوانید منطقه‌ای خارج از تصویر انتخاب کنید. هنگامی که یک نسبت ابعاد ثابت فعال است (1:1، 16:9، 4:3)، تغییر اندازه به‌طور خودکار آن نسبت را حفظ می‌کند.
3. نمایشگر پیکسل همزمان با کشیدن، به‌روز می‌شود و عرض، ارتفاع و موقعیت‌های X و Y برش فعلی را در مختصات پیکسل تصویر نشان می‌دهد. این به شما امکان می‌دهد ابعاد دقیق را بدون حدس و گمان هدف بگیرید.
4. هنگامی که روی «برش و دانلود» کلیک می‌کنید، صفحه فقط منطقه انتخاب‌شده از تصویر مبدأ را روی یک Canvas پنهان با وضوح پیکسل اصلی رسم می‌کند، سپس نتیجه را از طریق canvas.toBlob() در همان فرمت فایل مبدأ صادر می‌کند. یک URL Blob برای دانلود ایجاد می‌شود.

چرا تصاویر را آنلاین برش دهیم؟

• برش لبه‌های ناخواسته، فضاهای خالی یا شلوغی بصری را حذف می‌کند. یک بار برش اغلب ترکیب تصویر را بیشتر از هر فیلتر یا تنظیم رنگی بهبود می‌بخشد.
• کنترل نسبت ابعاد برای پلتفرم‌های انتشار ضروری است. فیدهای شبکه‌های اجتماعی برای پروفایل‌ها 1:1، برای تصاویر بندانگشتی ویدیو 16:9 و برای عکاسی استاندارد 4:3 را انتظار دارند. برش با نسبت درست از جعبه‌های سیاه نامناسب یا بریدگی‌های ناخواسته هنگام آپلود جلوگیری می‌کند.
• برش سمت کلاینت تنها گزینه روی دستگاه‌های شرکتی محدودشده‌ای است که ویرایشگر عکس ندارند. از آنجا که هیچ چیز آپلود نمی‌شود، خطر نشت داده وجود ندارد و برای تصاویر حساس نیازی به بررسی انطباق نیست.
• نمایشگر ابعاد زنده حدس و گمان را حذف می‌کند. مختصات پیکسل و اندازه انتخاب را هنگام کشیدن می‌بینید، بنابراین می‌توانید بدون جابجایی به یک ابزار اندازه‌گیری پیکسل، به عرض و ارتفاع دقیق برش دهید.

کاربردهای رایج برش

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

• آماده‌سازی عکس‌های محصول برای فروشگاه آنلاین. به نسبت ابعاد یکسان 1:1 یا 4:5 برش دهید تا هر تصویر بندانگشتی در شبکه مرتب شود. صادرات فرمت اصلی را حفظ می‌کند، بنابراین عکس‌های محصول JPEG به صورت JPEG باقی می‌مانند.
• برش اسکرین‌شات‌ها برای مستندات یا گزارش باگ‌ها. قبل از پیوست کردن تصویر به یک تیکت یا درخواست کشش، نوار ابزار مرورگر، نوار وظیفه ویندوز یا اعلان‌های حساس را برش دهید.
• قاب‌بندی تصویر اصلی یا بنر برای صفحه فرود. پیش‌تنظیم 16:9 را قفل کنید، مهم‌ترین بخش تصویر را در مرکز مستطیل برش قرار دهید، و با وضوح اصلی برای بهترین کیفیت در نمایشگرهای Retina صادر کنید.

یک مثال عملی: برش تصویر 4000×3000 به 1200×675 برای بنر اصلی

یک تصویر 4000×3000 پیکسل از یک دوربین دیجیتال برای یک بنر اصلی وب معمولی بسیار بزرگ است. فضای بنر ممکن است 1200×675 (یک قاب 16:9) باشد.

تصویر را در منطقه آپلود رها کنید. تصویر با وضوح کامل بارگذاری می‌شود اما برای تعامل راحت با کشیدن، متناسب با نمای دید مقیاس‌بندی می‌شود. پیش‌تنظیم نسبت ابعاد 16:9 را انتخاب کنید. مستطیل برش فوراً به پهن‌ترین منطقه 16:9 که در تصویر جا می‌شود می‌چسبد. مستطیل را بکشید تا نقطه کانونی — یک قله کوه، یک محصول، چهره یک نفر — را در قاب قرار دهید. نمایشگر زنده انتخاب فعلی را در 4000×2250 (پنجره 16:9 کل تصویر) نشان می‌دهد. یک دسته گوشه را بگیرید و به داخل بکشید تا نمایشگر عرض به 1200 px برسد. ارتفاع به‌طور خودکار دنبال می‌کند چون نسبت قفل است. روی برش و دانلود کلیک کنید. صفحه منطقه انتخاب‌شده 1200×675 را از پیکسل‌های اصلی استخراج می‌کند و فایل برش‌خورده را در فرمت مبدأ تحویل می‌دهد. کل این فرآیند یک یا دو ثانیه طول می‌کشد و پهنای باند شبکه‌ای فراتر از بارگذاری اولیه صفحه مصرف نمی‌کند.

چه فرمت‌های تصویری برای برش پشتیبانی می‌شوند؟

این ابزار هر فرمتی را که مرورگر می‌تواند رمزگشایی کند می‌پذیرد: PNG، JPEG و WebP تقریباً همه موارد استفاده واقعی را پوشش می‌دهند. خروجی برش‌خورده در همان فرمت فایل مبدأ ذخیره می‌شود. PNG بدون افت باقی می‌ماند، JPEG سطح کیفیت اصلی خود را حفظ می‌کند، و WebP همان WebP می‌ماند. فرمت از نوع MIME فایل مبدأ تشخیص داده می‌شود.

آیا برش اندازه فایل تصویر را کاهش می‌دهد؟

برش پیکسل‌ها را حذف می‌کند، بنابراین اندازه فایل خروجی معمولاً کوچک‌تر از منبع است، به‌ویژه وقتی یک حاشیه بزرگ یا منطقه خالی را برش می‌دهید. صادرات از فرمت فایل اصلی و پارامترهای رمزگذاری آن استفاده می‌کند — PNG بدون افت باقی می‌ماند، JPEG تنظیم کیفیت اصلی خود را حفظ می‌کند — بنابراین صرفه‌جویی فقط از تعداد پیکسل کاهش‌یافته ناشی می‌شود، نه از فشرده‌سازی مجدد.

پیش‌تنظیم‌های نسبت ابعاد چه کاری انجام می‌دهند؟

پیش‌تنظیم‌ها (1:1، 16:9، 4:3، 3:2، 9:16) نسبت عرض به ارتفاع مستطیل برش را قفل می‌کنند. وقتی یک پیش‌تنظیم فعال است، کشیدن هر دسته گوشه یا لبه، اندازه انتخاب را در حالی که نسبت ثابت می‌ماند تنظیم می‌کند. تغییر به حالت آزاد محدودیت را حذف می‌کند تا بتوانید مستطیل را به دلخواه تغییر اندازه دهید. نسبت روی مختصات پیکسل تصویر اعمال می‌شود، بنابراین خروجی صادرشده دقیقاً همان نسبت ابعادی را دارد که انتخاب کرده‌اید.

آیا تصویر به سرور آپلود می‌شود؟

خیر. تصویر هرگز دستگاه شما را ترک نمی‌کند. صفحه از File API مرورگر برای خواندن تصویر در حافظه و از Canvas API برای برش و صادرات نتیجه استفاده می‌کند. می‌توانید با باز کردن پنل DevTools Network مرورگر خود این را تأیید کنید — تنها درخواست‌های خروجی در طول برش، بارگذاری اولیه صفحه و تماس‌های تبلیغاتی هستند. هیچ داده تصویری منتقل نمی‌شود.

آیا می‌توانم با وارد کردن مختصات پیکسل دقیق، ناحیه خاصی را برش دهم؟

نسخه فعلی مستطیل برش را از طریق تعامل کشیدن روی پیش‌نمایش تصویر تنظیم می‌کند. می‌توانید مختصات پیکسل زنده را برای X، Y، عرض و ارتفاع انتخاب بخوانید. ورود عددی مستقیم برای مستطیل برش در v1 در دسترس نیست اما یک بهبود برنامه‌ریزی‌شده برای به‌روزرسانی آینده است.

برای تصویر اصلی چه اتفاقی می‌افتد؟

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

آیا محدودیت اندازه فایل برای برش وجود دارد؟

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

آیا برش روی تلفن‌های همراه و تبلت‌ها کار می‌کند؟

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