ছবি ক্রপ করতে JavaScript API
ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি যা জাভাস্ক্রিপ্ট অ্যাপ ক্রপিং সমর্থন করে।
ক্রপার হল একটি ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি যা আপনার ব্রাউজারে ছবি ক্রপ করার অনুমতি দেয়। API ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে 27টি ভিন্ন পদ্ধতি, 39টি ভিন্ন বিকল্প এবং 6টি ইভেন্ট সহ উন্নত ক্রপিং বৈশিষ্ট্য যোগ করতে পারেন। API ব্যবহার করে আপনি সহজেই কাজ করতে পারেন এবং আপনার ব্রাউজারে আপনার ছবি ক্রপ করতে পারেন।
এই লাইব্রেরি ক্রপিং বৈশিষ্ট্যের বিস্তৃত পরিসরে সহায়তা প্রদান করে। এটি টাচ স্ক্রিন, জুমিং, রোটেটিং, স্কেলিং এবং ফ্লিপিং, একাধিক ক্রপার ব্যবহার করে ছবি ক্রপ করা সমর্থন করে, ক্যানভাসে ছবি কাটানোর অনুমতি দেয়, ক্রস-ব্রাউজার সমর্থন সহ ব্রাউজার-সাইড ক্যানভাসে ছবি কাটানোর অনুমতি দেয়।
ক্রপার দিয়ে শুরু করা
NPM এর মাধ্যমে ক্রপার ইনস্টল করার প্রস্তাবিত উপায়। এটি ইনস্টল করতে নিম্নলিখিত কমান্ড ব্যবহার করুন.
NPM এর মাধ্যমে ক্রপার ইনস্টল করুন
npm install cropperjs
জাভাস্ক্রিপ্ট অ্যাপের মধ্যে ছবি ক্রপ করুন
ক্রপার লাইব্রেরি সফ্টওয়্যার প্রোগ্রামারদের জাভাস্ক্রিপ্ট ব্যবহার করে তাদের ছবিগুলি প্রোগ্রাম্যাটিকভাবে ক্রপ করার ক্ষমতা দেয়। একটি ইমেজ ক্রপ করার জন্য, আপনাকে ইমেজ লোড করতে হবে এবং নিশ্চিত করতে হবে যে ইমেজের সাইজ কনটেইনারে পুরোপুরি ফিট করে। আপনার ছবি প্রস্তুত হওয়ার পরে, আপনি প্রদত্ত x এবং y স্থানাঙ্কে ক্রপিং বৈশিষ্ট্যগুলির একটি সেট সম্পাদন করতে পারেন যার মধ্যে রয়েছে ঘূর্ণন, ফ্লিপিং, স্কেলিং এবং আপনার প্রয়োজন অনুসারে উচ্চতা এবং প্রস্থ নির্ধারণ করা। .
ছবি ক্রপ করুন এবং JavaScript API এর মাধ্যমে এটি সংরক্ষণ করুন
// vars
let result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#file-input'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', e => {
if (e.target.files.length) {
// start file reader
const reader = new FileReader();
reader.onload = e => {
if (e.target.result) {
// create new image
let img = document.createElement('img');
img.id = 'image';
img.src = e.target.result;
// clean result before
result.innerHTML = '';
// append new image
result.appendChild(img);
// show save btn and options
save.classList.remove('hide');
options.classList.remove('hide');
// init cropper
cropper = new Cropper(img);
}
};
reader.readAsDataURL(e.target.files[0]);
}
});
// save on click
save.addEventListener('click', e => {
e.preventDefault();
let imgSrc = cropper.getCroppedCanvas({
width: img_w.value // input value
}).toDataURL();
cropped.classList.remove('hide');
img_result.classList.remove('hide');
cropped.src = imgSrc;
dwn.classList.remove('hide');
dwn.download = 'imagename.png';
dwn.setAttribute('href', imgSrc);
});
জাভাস্ক্রিপ্ট ব্যবহার করে ব্রাউজারে ছবি ক্রপ করুন
আপনি আপনার অ্যাপে ইমেজ ক্রপিং কার্যকারিতা যোগ করতে পারেন এবং ব্যবহারকারীরা ব্রাউজার থেকে সরাসরি ছবি ক্রপ করতে পারেন। ব্যবহারকারীরা ব্রাউজারে ছবি আপলোড বা ড্র্যাগ-ড্রপ করতে পারেন এবং এতে ক্রপিং বৈশিষ্ট্য প্রয়োগ করতে পারেন। API ক্রস-ব্রাউজার সামঞ্জস্য প্রদান করে। এপিআই ক্রোম, ফায়ারফক্স, সাফারি, অপেরা, এজ এবং ইন্টারনেট এক্সপ্লোরারের সর্বশেষ সংস্করণ ব্যবহার করে ভাল কাজ করে।
জাভাস্ক্রিপ্টের মাধ্যমে অনলাইনে ছবি ক্রপ করুন
//instantiate Cropper
var cropper = canvas.cropper({
aspectRatio: 16 / 9
});
//Crop Image
$('#btnCrop').click(function() {
// Get a string base 64 data url
var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
$result.append( $('
').attr('src', croppedImageDataURL) );
});
জাভাস্ক্রিপ্টে ক্রপিং পদ্ধতি ব্যবহার করা
নমনীয়তা প্রদানের জন্য, এপিআই ছবি ক্রপ করার জন্য একগুচ্ছ পদ্ধতি প্রদান করে। এই পদ্ধতিগুলি বিকাশকারীকে সহজেই অ্যাপ্লিকেশনটিতে চিত্র ক্রপিং বৈশিষ্ট্য যুক্ত করতে সহায়তা করে। API ইমেজ ক্রপ করার পদ্ধতি ক্রপ() প্রদান করে। উপরন্তু, আপনি reset(), clear(), replace(), enable(), disable(), delete(), move(), zoom(), rotate(), স্কেল(), getData(), setData ব্যবহার করতে পারেন। (), getCanvasData() এবং আরও অনেক কিছু।
জাভাস্ক্রিপ্টের মাধ্যমে ক্যানভাস থেকে পরম অনুপাত জুম করুন
cropper.zoomTo(1); // 1:1 (canvasData.width === canvasData.naturalWidth)
const containerData = cropper.getContainerData();
// Zoom to 50% from the center of the container.
cropper.zoomTo(.5, {
x: containerData.width / 2,
y: containerData.height / 2,
});