বিনামূল্যে ছবি ক্রপার

কিভাবে কাজ করে

ক্রপ পুরোপুরি আপনার ব্রাউজারে 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() ফলাফল এনকোড করে দেয়

   Crop-এ ক্লিক করলে ঠিক ক্রপের মাপে একটি নতুন অফ-স্ক্রিন ক্যানভাস তৈরি হয়। ctx.drawImage() শুধু নির্বাচিত আয়তক্ষেত্র কপি করে, এবং canvas.toBlob() আপনার বাছাই করা মানে ব্রাউজারের নেটিভ JPEG, PNG বা WebP এনকোডার দিয়ে ফলাফল এনকোড করে। আউটপুট ডাউনলোডের জন্য একটি লোকাল blob URL হিসেবে ফেরত আসে।

সম্পর্কিত টুলস