JavaScript API til at beskære billeder

Kom godt i gang med Cropper

Den anbefalede måde at installere cropper på via NPM. Brug venligst følgende kommando til at installere det.

 npm install cropperjs 

Beskær billeder i JavaScript-apps

Cropper-biblioteket giver softwareprogrammører mulighed for programmæssigt at beskære deres billeder ved hjælp af JavaScript. For at beskære et billede skal du indlæse billedet og sikre, at størrelsen på billedet passer perfekt til beholderen. Når du har dit billede klar, kan du udføre et sæt beskæringsfunktioner på de givne x- og y-koordinater, herunder rotation, vending, skalering og indstilling af højde og bredde i henhold til dit 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);
});

Beskær billeder i browser ved hjælp af JavaScript

Du kan tilføje billedbeskæringsfunktionalitet i dine apps, og brugere kan beskære billeder direkte fra browseren. Brugere kan uploade eller trække-slip billeder i browseren og anvende beskæringsfunktioner på den. API'en giver kompatibilitet på tværs af browsere. API'en fungerer fint med den nyeste version af 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) );
});

Brug af beskæringsmetoder i JavaScript

For at give fleksibilitet giver API'en en masse metoder til at beskære billeder. Disse metoder hjælper udvikleren med nemt at tilføje billedbeskæringsfunktioner til applikationen. API'en giver metoden crop() til at beskære billedet. Desuden kan du bruge reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() og mere.

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