„JavaScript“ API vaizdams apkarpyti

Darbo su Cropper pradžia

Rekomenduojamas pjoviklio įrengimo per NPM būdas. Norėdami ją įdiegti, naudokite šią komandą.

 npm install cropperjs 

Apkarpykite vaizdus „JavaScript“ programose

„Cropper“ biblioteka programinės įrangos programuotojams suteikia galimybę programiškai apkarpyti vaizdus naudojant „JavaScript“. Norėdami apkarpyti vaizdą, turite jį įkelti ir užtikrinti, kad jo dydis puikiai atitiktų konteinerį. Paruošę vaizdą, galite atlikti tam tikrų x ir y koordinačių apkarpymo funkcijų rinkinį, įskaitant pasukimą, apvertimą, mastelio keitimą ir aukščio bei pločio nustatymą pagal savo poreikius. .

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

Apkarpykite vaizdus naršyklėje naudodami „JavaScript“.

Savo programose galite pridėti vaizdų apkarpymo funkciją, o vartotojai gali apkarpyti vaizdus tiesiai iš naršyklės. Vartotojai gali įkelti arba nuvilkti vaizdus į naršyklę ir pritaikyti jai apkarpymo funkcijas. API užtikrina kelių naršyklių suderinamumą. API veikia gerai naudojant naujausią „Chrome“, „Firefox“, „Safari“, „Opera“, „Edge“ ir „Internet Explorer“ versiją.

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

Apkarpymo metodų naudojimas „JavaScript“.

Siekiant užtikrinti lankstumą, API pateikia daugybę vaizdų apkarpymo metodų. Šie metodai padeda kūrėjui lengvai pridėti vaizdų apkarpymo funkcijų prie programos. API suteikia metodą crop(), kad apkarpytumėte vaizdą. Be to, galite naudoti iš naujo (), išvalyti (), pakeisti (), įgalinti (), išjungti (), sunaikinti (), perkelti (), mastelį (), pasukti (), mastelį (), getData (), setData (), getCanvasData () ir kt.

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