JavaScript API برای برش تصاویر
کتابخانه جاوا اسکریپت منبع باز که از برش برنامه های جاوا اسکریپت پشتیبانی می کند.
Cropper یک کتابخانه جاوا اسکریپت منبع باز است که امکان برش تصاویر را در مرورگر شما فراهم می کند. با استفاده از API می توانید ویژگی های برش پیشرفته را با 27 روش مختلف، 39 گزینه مختلف و 6 رویداد به برنامه خود اضافه کنید. با استفاده از API می توانید به راحتی کار کنید و تصاویر خود را در مرورگر خود برش دهید.
این کتابخانه از طیف گسترده ای از ویژگی های برش پشتیبانی می کند. این برنامه از برش تصاویر از طریق صفحه لمسی، زوم، چرخش، مقیاسگذاری و چرخش، با استفاده از برشدهندههای متعدد، امکان برش تصاویر بر روی بوم، امکان برش تصاویر در بوم سمت مرورگر با پشتیبانی از مرورگر را پشتیبانی میکند.
شروع کار با Cropper
روش توصیه شده برای نصب کراپر از طریق NPM. لطفا از دستور زیر برای نصب آن استفاده کنید.
کراپر را از طریق NPM نصب کنید
npm install cropperjs
برش تصاویر در برنامه های جاوا اسکریپت
کتابخانه Cropper به برنامه نویسان نرم افزار این قابلیت را می دهد که با استفاده از جاوا اسکریپت تصاویر خود را بصورت برنامه نویسی برش دهند. برای برش تصویر، باید تصویر را بارگذاری کنید و مطمئن شوید که اندازه تصویر کاملاً متناسب با ظرف است. پس از اینکه تصویر خود را آماده کردید، میتوانید مجموعهای از ویژگیهای برش را روی مختصات 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 سازگاری بین مرورگرها را فراهم می کند. 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 مجموعه ای از روش ها را برای برش تصاویر ارائه می دهد. این روش ها به توسعه دهنده کمک می کند تا ویژگی های برش تصویر را به راحتی به برنامه اضافه کند. API متد crop() را برای برش تصویر ارائه می کند. علاوه بر این، می توانید از reset()، clear()، replace()، enable()، disable()، death()، move()، zoom()، rotate()، scale()، 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,
});