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

JavaScript библиотека с отворен код, която поддържа изрязване на JavaScript приложения.

Cropper е JavaScript библиотека с отворен код, която позволява изрязване на изображения във вашия браузър. С помощта на API можете да добавите подобрени функции за изрязване към вашето приложение с 27 различни метода, 39 различни опции и 6 събития. С помощта на API можете лесно да работите и изрязвате вашите изображения във вашия браузър.

Тази библиотека осигурява поддръжка за широк набор от функции за изрязване. Поддържа изрязване на изображения чрез сензорен екран, мащабиране, завъртане, мащабиране и обръщане, използване на множество машини за изрязване, позволява изрязване на изображения върху платно, позволява изрязване на изображения върху платно от страна на браузъра с поддръжка на различни браузъри.

Previous Next

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

Препоръчителният начин за инсталиране на 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.

Изрязване на изображения онлайн чрез 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 предоставя метода crop() за изрязване на изображението. Освен това можете да използвате reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() и др.

Zoom Canvas към 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,
});
 Български