برش تصویر رایگان

نحوه کار

برش کاملاً در مرورگر شما با استفاده از HTML5 Canvas API اتفاق می‌افتد — بدون آپلود، بدون سرور. یک منطقه انتخاب را مستقیماً روی یک عنصر بوم می‌کشید، و وقتی برش را اعمال می‌کنید، موتور رندرینگ 2D داخلی مرورگر فقط پیکسل‌های انتخاب‌شده را می‌خواند و آن‌ها را به JPEG، PNG، یا WebP دوباره کدگذاری می‌کند.

1. 1
   تصویر به حافظه بارگذاری شد

   فایل شما با URL.createObjectURL() خوانده می‌شود، که یک URL بلاب محلی به مرورگر می‌دهد. یک HTMLImageElement فایل را کاملاً در تب مرورگر رمزگشایی می‌کند — بایت‌های تصویر هرگز دستگاه شما را ترک نمی‌کنند.
2. 2
   رویدادهای اشاره‌گر انتخاب برش را هدایت می‌کنند

   API رویدادهای اشاره‌گر مرورگر (که ورودی ماوس، لمس و قلم را یکپارچه می‌کند) کشیدن‌ها را روی یک لایه رویی بوم ردیابی می‌کند. فشار خارج از انتخاب یک مستطیل جدید شروع می‌کند؛ فشار داخل آن را جابه‌جا می‌کند؛ فشار نزدیک گوشه پایین-راست اندازه‌اش را تغییر می‌دهد. پیش‌تنظیم‌های اختیاری نسبت ابعاد (۱:۱، ۱۶:۹، ۴:۳ و غیره) هندسه را هنگام کشیدن محدود می‌کنند.
3. 3
   بوم پیش‌نمایش زنده را می‌کشد

   در هر تغییر برش، زمینه Canvas 2D تصویر را دوباره می‌کشد، یک لایه تیره خارج از انتخاب اعمال می‌کند، ناحیه برش را پاک می‌کند تا تصویر اصلی با وفاداری کامل نشان داده شود، و یک شبکه قانون یک‌سوم و یک دستگیره تغییر اندازه فیروزه‌ای روی آن می‌گذارد.
4. 4
   toBlob() نتیجه را کدگذاری و تحویل می‌دهد

   وقتی روی برش کلیک می‌کنید، یک بوم خارج-از-صفحه جدید در ابعاد دقیق برش ساخته می‌شود. ctx.drawImage() فقط مستطیل انتخاب‌شده را کپی می‌کند، و canvas.toBlob() نتیجه را با استفاده از کدگذار بومی JPEG، PNG، یا WebP مرورگر در تنظیم کیفیت انتخابی شما کدگذاری می‌کند. خروجی به‌عنوان یک URL بلاب محلی برای دانلود بازگردانده می‌شود.

ابزارهای مرتبط