JavaScript API för att beskära bilder

Komma igång med Cropper

Det rekommenderade sättet att installera cropper via NPM. Använd följande kommando för att installera det.

 npm install cropperjs 

Beskär bilder i JavaScript-appar

Cropper-biblioteket ger programvaruprogrammerare möjlighet att beskära sina bilder programmatiskt med JavaScript. För att beskära en bild måste du ladda bilden och se till att storleken på bilden passar behållaren perfekt. När du har din bild redo kan du utföra en uppsättning beskärningsfunktioner på de givna x- och y-koordinaterna inklusive rotation, vändning, skalning och inställning av höjd och bredd enligt dina 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 bilder i webbläsaren med JavaScript

Du kan lägga till bildbeskärningsfunktioner i dina appar och användare kan beskära bilder direkt från webbläsaren. Användare kan ladda upp eller dra-släpp bilder i webbläsaren och använda beskärningsfunktioner på den. API ger kompatibilitet över webbläsare. API:et fungerar bra med den senaste versionen av Chrome, Firefox, Safari, Opera, Edge och 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) );
});

Använda beskärningsmetoder i JavaScript

För att ge flexibilitet tillhandahåller API:et ett gäng metoder för att beskära bilder. Dessa metoder hjälper utvecklaren att enkelt lägga till bildbeskärningsfunktioner till applikationen. API:et tillhandahåller metoden crop() för att beskära bilden. Dessutom kan du använda reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() och 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,
});