একটি ছবি ক্রপ করুন _

ব্রাউজার-ভিত্তিক ইমেজ ক্রপিং কীভাবে কাজ করে

ক্রপিং প্রক্রিয়াটি Canvas API ব্যবহার করে সম্পূর্ণ আপনার ব্রাউজার ট্যাবের ভিতরেই চলে। কোনো সার্ভার-সাইড প্রক্রিয়াকরণ নেই, কোনো আপলোড নেই, কোনো তৃতীয়-পক্ষের সেবা নেই। প্রতিটি ধাপ আপনার ডিভাইসে ঘটে।

1. ছবিটি একটি <img> এলিমেন্টে লোড করুন যাতে ব্রাউজার এটি স্থানীয়ভাবে ডিকোড করে। একটি ক্যানভাস ওভারলে ভিউপোর্টে ফিট করার জন্য ছবিটি স্কেল করে রেন্ডার করে, আর একটি টেনে আনা যায় এমন নির্বাচন আয়তক্ষেত্র বর্তমান ক্রপ এলাকা দেখায়।
2. আয়তক্ষেত্রটির প্রান্ত বা কোণা টেনে ক্রপ এলাকা সামঞ্জস্য করুন। আয়তক্ষেত্রটি ছবির সীমানার মধ্যে ক্ল্যাম্পড থাকে যাতে আপনি ছবির বাইরের কোনো অঞ্চল নির্বাচন করতে না পারেন। যখন একটি নির্দিষ্ট আকৃতি অনুপাত (1:1, 16:9, 4:3) সক্রিয় থাকে, আকার পরিবর্তন স্বয়ংক্রিয়ভাবে সেই অনুপাত বজায় রাখে।
3. পিক্সেল রিডআউট টেনে আনার সময় লাইভ আপডেট হয়, যা ইমেজ-পিক্সেল কোঅর্ডিনেটে বর্তমান ক্রপ প্রস্থ, উচ্চতা, X এবং Y অবস্থান দেখায়। এটি আপনাকে অনুমান ছাড়াই সঠিক মাত্রা নির্ধারণ করতে দেয়।
4. যখন আপনি ক্রপ ও ডাউনলোড-এ ক্লিক করেন, পৃষ্ঠাটি সোর্স ইমেজের শুধু নির্বাচিত অঞ্চলটি মূল পিক্সেল রেজোলিউশনে একটি অফস্ক্রিন ক্যানভাসে আঁকে, তারপর canvas.toBlob()-এর মাধ্যমে সোর্স ফাইলের মতো একই ফরম্যাটে ফলাফল এক্সপোর্ট করে। ডাউনলোডের জন্য একটি Blob URL তৈরি হয়।

কেন অনলাইনে ছবি ক্রপ করবেন?

• ক্রপিং অবাঞ্ছিত প্রান্ত, খালি জায়গা বা দৃশ্যমান জট দূর করে। একটি মাত্র ক্রপ পাস প্রায়শই যেকোনো ফিল্টার বা রং সামঞ্জস্যের চেয়ে ফটোর কম্পোজিশন বেশি উন্নত করে।
• আকৃতি অনুপাত নিয়ন্ত্রণ প্রকাশনা প্ল্যাটফর্মের জন্য অপরিহার্য। সোশ্যাল-মিডিয়া ফিড প্রোফাইলের জন্য 1:1, ভিডিও থাম্বনেইলের জন্য 16:9 এবং সাধারণ ফটোগ্রাফির জন্য 4:3 আশা করে। সঠিক অনুপাতে ক্রপ করলে আপলোডের সময় অদ্ভুত লেটারবক্সিং বা ক্রপ-কাট-অফ এড়ানো যায়।
• ক্লায়েন্ট-সাইড ক্রপিং লক-ডাউন কর্পোরেট ডিভাইসে যেখানে ফটো এডিটর নেই, সেখানেই একমাত্র বিকল্প। যেহেতু কিছুই আপলোড হয় না, তাই সংবেদনশীল ছবির জন্য কোনো ডেটা-লিক ঝুঁকি বা কমপ্লায়েন্স পর্যালোচনার প্রয়োজন নেই।
• লাইভ ডাইমেনশন রিডআউট অনুমান দূর করে। টানার সময় আপনি পিক্সেল কোঅর্ডিনেট এবং নির্বাচনের আকার দেখতে পান, ফলে পিক্সেল-মাপার টুলে স্যুইচ না করেই সঠিক প্রস্থ ও উচ্চতায় ক্রপ করতে পারেন।

সাধারণ ক্রপিং প্রয়োগ

ক্রপিং ওয়েব প্রকাশনা, সোশ্যাল মিডিয়া এবং সফটওয়্যার ডেভেলপমেন্ট জুড়ে সবচেয়ে সাধারণ ইমেজ এডিটগুলির একটি। এখানে তিনটি পরিস্থিতি যেখানে একটি ব্রাউজার-ভিত্তিক ক্রপার সময় বাঁচায়।

• অনলাইন স্টোরের জন্য পণ্যের ফটো প্রস্তুত করা। সামঞ্জস্যপূর্ণ 1:1 বা 4:5 আকৃতি অনুপাতে ক্রপ করুন যাতে প্রতিটি লিস্টিং থাম্বনেইল গ্রিডে সারিবদ্ধ থাকে। এক্সপোর্ট মূল ফরম্যাট সংরক্ষণ করে, তাই JPEG পণ্যের ছবি JPEG-ই থাকে।
• ডকুমেন্টেশন বা বাগ রিপোর্টের জন্য স্ক্রিনশট ছাঁটাই। ছবিটি টিকিট বা পুল রিকোয়েস্টে সংযুক্ত করার আগে ব্রাউজার টুলবার, Windows টাস্কবার, বা সংবেদনশীল নোটিফিকেশন ক্রপ করে ফেলুন।
• ল্যান্ডিং পেজের জন্য হিরো ইমেজ বা ব্যানার ফ্রেমিং। 16:9 প্রিসেট লক করুন, ফটোর সবচেয়ে গুরুত্বপূর্ণ অংশ ক্রপ আয়তক্ষেত্রের কেন্দ্রে রাখুন, এবং রেটিনা ডিসপ্লেতে সর্বোত্তম মানের জন্য মূল রেজোলিউশনে এক্সপোর্ট করুন।

একটি উদাহরণ: 4000×3000 ফটোকে হিরো ব্যানারের জন্য 1200×675-এ ক্রপ করা

ডিজিটাল ক্যামেরার 4000×3000 পিক্সেলের ফটো একটি সাধারণ ওয়েব হিরো ব্যানারের জন্য অনেক বড়। ব্যানার স্পেসটি 1200×675 (একটি 16:9 ফ্রেম) হতে পারে।

আপলোড জোনে ফটোটি ড্রপ করুন। ছবিটি পূর্ণ রেজোলিউশনে লোড হয় কিন্তু আরামদায়ক ড্র্যাগ ইন্টারঅ্যাকশনের জন্য ভিউপোর্টে ফিট হওয়ার মতো স্কেল করে। 16:9 আকৃতি অনুপাত প্রিসেট নির্বাচন করুন। ক্রপ আয়তক্ষেত্র তাৎক্ষণিকভাবে ছবির মধ্যে ফিট হওয়া সবচেয়ে চওড়া 16:9 অঞ্চলে স্ন্যাপ করে। ফোকাল পয়েন্ট — একটি পর্বতশৃঙ্গ, একটি পণ্য, একজন ব্যক্তির মুখ — ফ্রেমে রাখতে আয়তক্ষেত্র টানুন। লাইভ রিডআউট 4000×2250 (পূর্ণ-ছবি 16:9 উইন্ডো) তে বর্তমান নির্বাচন দেখায়। একটি কোণার হ্যান্ডেল ধরে ভিতরের দিকে টানুন যতক্ষণ না প্রস্থ রিডআউট 1200 px দেখায়। উচ্চতা স্বয়ংক্রিয়ভাবে অনুসরণ করে কারণ অনুপাত লক করা আছে। Crop & Download-এ ক্লিক করুন। পৃষ্ঠাটি মূল পিক্সেল থেকে নির্বাচিত 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-এ উপলব্ধ নয় তবে ভবিষ্যতের আপডেটের জন্য একটি পরিকল্পিত সংযোজন।

মূল ছবিটির কী হয়?

মূল ফাইলটি আপনার ডিভাইসে থাকে। পৃষ্ঠাটি প্রদর্শন ও ক্রপিংয়ের জন্য এটি ব্রাউজার মেমরিতে পড়ে, কিন্তু ডিস্কের সোর্স ফাইলটি কখনো পরিবর্তন করে না। ক্রপ করা আউটপুট একটি নতুন ফাইল যা আপনি আলাদাভাবে ডাউনলোড করেন। মূল ফাইলটি আপনার কম্পিউটার বা ফোনের মূল অবস্থানে অস্পর্শিত থাকে।

ক্রপ করার জন্য কি ফাইল সাইজের সীমা আছে?

টুলটি নিম্ন-শেষের ডিভাইসে ব্রাউজার মেমরি নিয়ন্ত্রণে রাখতে আপলোড জোনে ৩০ MB প্রতি ফাইল সীমা মেনে চলে। আপনার ছবি ৩০ MB-র চেয়ে বড় হলে, এটি ক্রপ করার জন্য এখানে লোড করার আগে একটি ডেডিকেটেড ইমেজ রিসাইজার টুল ব্যবহার করে প্রথমে আকার পরিবর্তন করতে পারেন।

মোবাইল ফোন ও ট্যাবলেটে কি ক্রপিং কাজ করে?

হ্যাঁ। ক্রপ হ্যান্ডেলগুলি টাচ টার্গেট বিবেচনায় সাইজ করা হয়েছে, এবং ইন্টারঅ্যাকশন পয়েন্টার ইভেন্ট ব্যবহার করে যা মাউস ক্লিক ও ফিঙ্গার ট্যাপ উভয়ের সাথেই কাজ করে। ফোন স্ক্রিনে ছবি প্রিভিউ উপলব্ধ প্রস্থের সাথে খাপ খায়, এবং নিয়ন্ত্রণগুলি সহজ এক-হাত ব্যবহারের জন্য উল্লম্বভাবে সাজানো হয়।