مفت تصویر کراپر

یہ کیسے کام کرتا ہے

کراپنگ مکمل طور پر آپ کے براؤزر میں HTML5 Canvas API سے ہوتی ہے — نہ اپ لوڈ، نہ سرور۔ آپ canvas عنصر پر براہ راست انتخابی حصہ گھسیٹتے ہیں، اور کراپ لگانے پر براؤزر کا بلٹ اِن 2D رینڈرنگ انجن صرف منتخب پکسلز پڑھ کر انہیں JPEG، PNG یا WebP میں دوبارہ انکوڈ کرتا ہے۔

1. 1
   تصویر میموری میں لوڈ ہوتی ہے

   آپ کی فائل URL.createObjectURL() سے پڑھی جاتی ہے، جو براؤزر کو مقامی blob URL دیتا ہے۔ ایک HTMLImageElement فائل کو مکمل طور پر براؤزر ٹیب میں ڈی کوڈ کرتا ہے — تصویر کے بائٹس کبھی آپ کے آلے سے باہر نہیں جاتے۔
2. 2
   Pointer Events کراپ کا انتخاب چلاتے ہیں

   براؤزر کی Pointer Events API (جو ماؤس، ٹچ اور قلم کے ان پٹ کو یکجا کرتی ہے) canvas اوورلے پر گھسیٹنے کو ٹریک کرتی ہے۔ انتخاب سے باہر دبانے سے نیا مستطیل شروع ہوتا ہے؛ اندر دبانے سے وہ کھسکتا ہے؛ نیچے دائیں کونے کے قریب دبانے سے سائز بدلتا ہے۔ اختیاری تناسب کے پری سیٹس (1:1، 16:9، 4:3 وغیرہ) گھسیٹتے وقت شکل محدود رکھتے ہیں۔
3. 3
   Canvas لائیو پیش منظر بناتا ہے

   ہر کراپ تبدیلی پر Canvas 2D context تصویر دوبارہ بناتا ہے، انتخاب سے باہر گہرا اوورلے لگاتا ہے، کراپ والا حصہ صاف کر کے اصل تصویر مکمل وضاحت میں دکھاتا ہے، اور اوپر rule-of-thirds گرڈ اور فیروزی سائز ہینڈل رکھتا ہے۔
4. 4
   toBlob() نتیجہ انکوڈ کر کے دیتا ہے

   جب آپ کراپ پر کلک کرتے ہیں تو بالکل کراپ کے ابعاد پر نیا آف اسکرین canvas بنتا ہے۔ ctx.drawImage() صرف منتخب مستطیل کاپی کرتا ہے، اور canvas.toBlob() نتیجے کو آپ کی منتخب کوالٹی پر براؤزر کے مقامی JPEG، PNG یا WebP انکوڈر سے انکوڈ کرتا ہے۔ آؤٹ پٹ ڈاؤن لوڈ کے لیے مقامی blob URL کے طور پر واپس ملتا ہے۔

متعلقہ ٹولز