API JavaScript pentru a decupa imagini
Bibliotecă JavaScript open source care acceptă decuparea aplicațiilor JavaScript.
Cropper este o bibliotecă JavaScript open source care permite decuparea imaginilor în browser. Folosind API-ul, puteți adăuga caracteristici îmbunătățite de decupare aplicației dvs. cu 27 de metode diferite, 39 de opțiuni diferite și 6 evenimente. Folosind API-ul, puteți lucra și decupa cu ușurință imaginile în browser.
Această bibliotecă oferă suport pentru o gamă largă de funcții de decupare. Acceptă decuparea imaginilor prin intermediul ecranului tactil, mărirea, rotirea, scalarea și răsturnarea, folosind mai multe croppers, permite decuparea imaginilor pe pânză, permite decuparea imaginilor pe pânza laterală a browserului cu suporturi pentru cross-browser.
Noțiuni introductive cu Cropper
Modul recomandat de a instala cropper prin NPM. Vă rugăm să utilizați următoarea comandă pentru a o instala.
Instalați cropper prin NPM
npm install cropperjs
Decupați imagini în interiorul aplicațiilor JavaScript
Biblioteca Cropper oferă programatorilor de software capacitatea de a-și decupa imaginile în mod programatic folosind JavaScript. Pentru a decupa o imagine, trebuie să încărcați imaginea și să vă asigurați că dimensiunea imaginii se potrivește perfect containerului. După ce aveți imaginea pregătită, puteți efectua un set de caracteristici de decupare pe coordonatele x și y date, inclusiv rotirea, răsturnarea, scalarea și setarea înălțimii și lățimii conform cerințelor dvs. .
Decupați imaginea și salvați-o prin API-ul JavaScript
// 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);
});
Decupați imagini în browser folosind JavaScript
Puteți adăuga funcționalitate de tăiere a imaginilor în aplicațiile dvs., iar utilizatorii pot decupa imagini direct din browser. Utilizatorii pot încărca sau plasa imagini în browser și pot aplica funcții de decupare. API-ul oferă compatibilitate între browsere. API-ul funcționează bine folosind cea mai recentă versiune de Chrome, Firefox, Safari, Opera, Edge și Internet Explorer.
Decupați imagini online prin 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) );
});
Utilizarea metodelor de decupare în JavaScript
Pentru a oferi flexibilitate, API-ul oferă o mulțime de metode de decupare a imaginilor. Aceste metode ajută dezvoltatorul să adauge cu ușurință funcții de tăiere a imaginii în aplicație. API-ul oferă metoda crop() pentru a decupa imaginea. Mai mult, puteți folosi reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() și multe altele.
Măriți pânza la raportul absolut prin 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,
});