JavaScript API за изрязване на изображения
JavaScript библиотека с отворен код, която поддържа изрязване на JavaScript приложения.
Cropper е JavaScript библиотека с отворен код, която позволява изрязване на изображения във вашия браузър. С помощта на API можете да добавите подобрени функции за изрязване към вашето приложение с 27 различни метода, 39 различни опции и 6 събития. С помощта на API можете лесно да работите и изрязвате вашите изображения във вашия браузър.
Тази библиотека осигурява поддръжка за широк набор от функции за изрязване. Поддържа изрязване на изображения чрез сензорен екран, мащабиране, завъртане, мащабиране и обръщане, използване на множество машини за изрязване, позволява изрязване на изображения върху платно, позволява изрязване на изображения върху платно от страна на браузъра с поддръжка на различни браузъри.
Първи стъпки с Cropper
Препоръчителният начин за инсталиране на Cropper чрез NPM. Моля, използвайте следната команда, за да го инсталирате.
Инсталирайте инструмента за изрязване чрез NPM
npm install cropperjs
Изрязване на изображения в приложенията на JavaScript
Библиотеката Cropper дава възможност на софтуерните програмисти да изрязват програмно своите изображения с помощта на JavaScript. За да изрежете изображение, трябва да го заредите и да се уверите, че размерът на изображението пасва перфектно на контейнера. След като сте подготвили изображението си, можете да извършите набор от функции за изрязване на дадените координати 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);
});
Изрязване на изображения в браузър с помощта на JavaScript
Можете да добавите функция за изрязване на изображения във вашите приложения и потребителите могат да изрязват изображения директно от браузъра. Потребителите могат да качват или плъзгат пускащи изображения в браузъра и да прилагат функции за изрязване към тях. API осигурява съвместимост между различни браузъри. API работи добре с най-новата версия на Chrome, Firefox, Safari, Opera, Edge и Internet Explorer.
Изрязване на изображения онлайн чрез JavaScript
//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) );
});
Използване на методи за изрязване в JavaScript
За да осигури гъвкавост, API предоставя куп методи за изрязване на изображения. Тези методи помагат на програмиста лесно да добави функции за изрязване на изображения към приложението. API предоставя метода crop() за изрязване на изображението. Освен това можете да използвате reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() и др.
Zoom Canvas към Absolute Ratio чрез JavaScript
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,
});