Şəkilləri kəsmək üçün JavaScript API

Cropper ilə işə başlamaq

NPM vasitəsilə kəsici quraşdırmanın tövsiyə olunan yolu. Quraşdırmaq üçün aşağıdakı əmrdən istifadə edin.

 npm install cropperjs 

Şəkilləri JavaScript Tətbiqləri daxilində kəsin

Cropper kitabxanası proqramçılara JavaScript-dən istifadə edərək şəkillərini proqramlı şəkildə kəsmək imkanı verir. Şəkli kəsmək üçün şəkli yükləməli və şəklin ölçüsünün konteynerə mükəmməl uyğun olduğundan əmin olmalısınız. Şəkilinizi hazır etdikdən sonra, tələbinizə uyğun olaraq fırlanma, sürüşdürmə, miqyaslama və hündürlüyü və eni təyin etmək daxil olmaqla, verilmiş x və y koordinatlarında bir sıra kəsmə funksiyalarını yerinə yetirə bilərsiniz. .

 // 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 istifadə edərək brauzerdə şəkilləri kəsin

Siz tətbiqlərinizə şəkil kəsmə funksiyası əlavə edə bilərsiniz və istifadəçilər şəkilləri birbaşa brauzerdən kəsə bilərlər. İstifadəçilər şəkilləri brauzerə yükləyə və ya sürükləyə və ona kəsmə funksiyalarını tətbiq edə bilərlər. API brauzerlər arası uyğunluğu təmin edir. API ən son Chrome, Firefox, Safari, Opera, Edge və Internet Explorer versiyalarından istifadə etməklə yaxşı işləyir.

 //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-də kəsmə üsullarından istifadə

Çevikliyi təmin etmək üçün API şəkilləri kəsmək üçün bir sıra üsullar təqdim edir. Bu üsullar tərtibatçıya tətbiqə asanlıqla şəkil kəsmə xüsusiyyətləri əlavə etməyə kömək edir. API təsviri kəsmək üçün crop() metodunu təmin edir. Bundan əlavə, siz reset(), clear(), əvəz(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData funksiyalarından istifadə edə bilərsiniz. (), getCanvasData() və s.

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