JavaScript API om afbeeldingen bij te snijden

Aan de slag met Cropper

De aanbevolen manier om cropper te installeren via NPM. Gebruik de volgende opdracht om het te installeren.

 npm install cropperjs 

Afbeeldingen bijsnijden in JavaScript-apps

De Cropper-bibliotheek geeft softwareprogrammeurs de mogelijkheid om hun afbeeldingen programmatisch bij te snijden met behulp van JavaScript. Om een afbeelding bij te snijden, moet u de afbeelding laden en ervoor zorgen dat de grootte van de afbeelding perfect in de container past. Nadat u uw afbeelding gereed hebt, kunt u een reeks bijsnijdfuncties uitvoeren op de gegeven x- en y-coördinaten, inclusief roteren, spiegelen, schalen en hoogte en breedte instellen volgens uw vereisten. .

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

Afbeeldingen bijsnijden in browser met JavaScript

U kunt functionaliteit voor het bijsnijden van afbeeldingen toevoegen aan uw apps en gebruikers kunnen afbeeldingen rechtstreeks vanuit de browser bijsnijden. Gebruikers kunnen afbeeldingen uploaden of neerzetten in de browser en er bijsnijdfuncties op toepassen. De API biedt compatibiliteit tussen browsers. De API werkt prima met de nieuwste versie van Chrome, Firefox, Safari, Opera, Edge en 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) );
});

Bijsnijdmethoden gebruiken in JavaScript

Om flexibiliteit te bieden, biedt de API een aantal methoden om afbeeldingen bij te snijden. Deze methoden helpen de ontwikkelaar om eenvoudig functies voor het bijsnijden van afbeeldingen aan de toepassing toe te voegen. De API biedt de methode crop() om de afbeelding bij te snijden. Verder kunt u reset(), clear(), Replace(), enable(), disable(), destroy(), move(), zoom(), roteren(), scale(), getData(), setData gebruiken (), getCanvasData() en meer.

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