JavaScript API за изрязване на изображения

Първи стъпки с Cropper

Препоръчителният начин за инсталиране на Cropper чрез NPM. Моля, използвайте следната команда, за да го инсталирате.

 npm install cropperjs 

Изрязване на изображения в приложенията на JavaScript

Библиотеката Cropper дава възможност на софтуерните програмисти да изрязват програмно своите изображения с помощта на JavaScript. За да изрежете изображение, трябва да го заредите и да се уверите, че размерът на изображението пасва перфектно на контейнера. След като сте подготвили изображението си, можете да извършите набор от функции за изрязване на дадените координати x и y, включително завъртане, обръщане, мащабиране и настройка на височина и ширина според вашите изисквания. .

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

Изрязване на изображения в браузър с помощта на JavaScript

Можете да добавите функция за изрязване на изображения във вашите приложения и потребителите могат да изрязват изображения директно от браузъра. Потребителите могат да качват или плъзгат пускащи изображения в браузъра и да прилагат функции за изрязване към тях. API осигурява съвместимост между различни браузъри. API работи добре с най-новата версия на Chrome, Firefox, Safari, Opera, Edge и 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) );
});

Използване на методи за изрязване в JavaScript

За да осигури гъвкавост, API предоставя куп методи за изрязване на изображения. Тези методи помагат на програмиста лесно да добави функции за изрязване на изображения към приложението. API предоставя метода crop() за изрязване на изображението. Освен това можете да използвате reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() и др.

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