1. Produse
  2.   Imagine
  3.   JavaScript
  4.   Cropper
 
  

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.

Previous Next

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,
});
 Română