JavaScript API for å beskjære bilder

Komme i gang med Cropper

Den anbefalte måten å installere cropper på via NPM. Bruk følgende kommando for å installere den.

 npm install cropperjs 

Beskjær bilder i JavaScript-apper

Cropper-biblioteket gir programvareprogrammerere muligheten til å beskjære bildene sine ved hjelp av JavaScript. For å beskjære et bilde, må du laste inn bildet og sørge for at størrelsen på bildet passer perfekt til beholderen. Etter at du har bildet klart, kan du utføre et sett med beskjæringsfunksjoner på de gitte x- og y-koordinatene, inkludert rotering, vending, skalering og innstilling av høyde og bredde i henhold til dine krav. .

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

Beskjær bilder i nettleseren ved hjelp av JavaScript

Du kan legge til bildebeskjæringsfunksjonalitet i appene dine, og brukere kan beskjære bilder direkte fra nettleseren. Brukere kan laste opp eller dra-slipp bilder i nettleseren og bruke beskjæringsfunksjoner på den. API gir kompatibilitet på tvers av nettlesere. API-en fungerer fint med den nyeste versjonen av Chrome, Firefox, Safari, Opera, Edge og 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) );
});

Bruke beskjæringsmetoder i JavaScript

For å gi fleksibilitet tilbyr API en haug med metoder for å beskjære bilder. Disse metodene hjelper utvikleren med å legge til bildebeskjæringsfunksjoner til applikasjonen enkelt. API-en gir metoden crop() for å beskjære bildet. Videre kan du bruke reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() og mer.

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