JavaScript API do przycinania obrazów

Pierwsze kroki z Cropperem

Zalecany sposób instalacji przycinacza przez NPM. Użyj następującego polecenia, aby go zainstalować.

 npm install cropperjs 

Przycinaj obrazy w aplikacjach JavaScript

Biblioteka Cropper daje programistom możliwość programowego przycinania obrazów za pomocą JavaScript. Aby przyciąć obraz, musisz go załadować i upewnić się, że rozmiar obrazu idealnie pasuje do pojemnika. Po przygotowaniu obrazu możesz wykonać zestaw funkcji przycinania na danych współrzędnych x i y, w tym obracanie, odwracanie, skalowanie oraz ustawianie wysokości i szerokości zgodnie z wymaganiami. .

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

Przycinaj obrazy w przeglądarce za pomocą JavaScript

Możesz dodać funkcję przycinania obrazów w swoich aplikacjach, a użytkownicy mogą przycinać obrazy bezpośrednio z przeglądarki. Użytkownicy mogą przesyłać lub przeciągać obrazy w przeglądarce i stosować do nich funkcje przycinania. Interfejs API zapewnia zgodność z różnymi przeglądarkami. Interfejs API działa dobrze z najnowszą wersją Chrome, Firefox, Safari, Opera, Edge i 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) );
});

Korzystanie z metod przycinania w JavaScript

Aby zapewnić elastyczność, API udostępnia kilka metod przycinania obrazów. Te metody pomagają programiście w łatwym dodawaniu funkcji przycinania obrazów do aplikacji. API udostępnia metodę crop() do przycinania obrazu. Ponadto możesz użyć reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() i więcej.

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