1. Товары
  2.   Изображение
  3.   JavaScript
  4.   Cropper
 
  

JavaScript API для обрезки изображений

Библиотека JavaScript с открытым исходным кодом, которая поддерживает обрезку приложений JavaScript.

Cropper — это библиотека JavaScript с открытым исходным кодом, которая позволяет обрезать изображения в вашем браузере. Используя API, вы можете добавить в свое приложение расширенные функции обрезки с помощью 27 различных методов, 39 различных параметров и 6 событий. Используя API, вы можете легко работать и обрезать изображения в своем браузере.

Эта библиотека поддерживает широкий спектр функций обрезки. Он поддерживает обрезку изображений с помощью сенсорного экрана, масштабирование, вращение, масштабирование и отражение, использование нескольких обрезков, позволяет обрезать изображения на холсте, позволяет обрезать изображения на холсте на стороне браузера с кросс-браузерной поддержкой.

Previous Next

Начало работы с Cropper

Рекомендуемый способ установки кроппера через NPM. Пожалуйста, используйте следующую команду для его установки.

Установить кроппер через NPM

 npm install cropperjs

Обрезка изображений в приложениях JavaScript

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

Обрезать изображение и сохранить его через JavaScript API

 // 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.

Crop Images Online через JavaScript

 //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 предоставляет метод урожая() для обрезки изображения. Кроме того, вы можете использовать reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() и другие.

Zoom Canvas to Absolute Ratio через JavaScript

 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,
});
 Русский