API JavaScript per ritagliare immagini

Iniziare con Cropper

Il modo consigliato per installare il cropper tramite NPM. Si prega di utilizzare il seguente comando per installarlo.

 npm install cropperjs 

Ritaglia le immagini all'interno di app JavaScript

La libreria Cropper offre ai programmatori di software la possibilità di ritagliare le proprie immagini in modo programmatico utilizzando JavaScript. Per ritagliare un'immagine, devi caricare l'immagine e assicurarti che le dimensioni dell'immagine si adattino perfettamente al contenitore. Dopo aver pronto l'immagine, puoi eseguire una serie di funzioni di ritaglio sulle coordinate xey fornite, tra cui rotazione, capovolgimento, ridimensionamento e impostazione di altezza e larghezza secondo le tue esigenze. .

 // 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);
});

Ritaglia le immagini nel browser usando JavaScript

Puoi aggiungere funzionalità di ritaglio delle immagini nelle tue app e gli utenti possono ritagliare le immagini direttamente dal browser. Gli utenti possono caricare o trascinare le immagini nel browser e applicarvi funzioni di ritaglio. L'API fornisce compatibilità tra browser. L'API funziona correttamente utilizzando l'ultima versione di Chrome, Firefox, Safari, Opera, Edge e Internet Explorer.

 //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) );
});

Utilizzo dei metodi di ritaglio in JavaScript

Per fornire flessibilità, l'API fornisce una serie di metodi per ritagliare le immagini. Questi metodi aiutano lo sviluppatore ad aggiungere facilmente funzionalità di ritaglio delle immagini all'applicazione. L'API fornisce il metodo crop() per ritagliare l'immagine. Inoltre, puoi usare reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() e altro.

 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,
});