JavaScript API для кадрування зображень

Початок роботи з 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,
});