JavaScript API kuvien leikkaamiseen

Cropperin käytön aloittaminen

Suositeltu tapa asentaa leikkuri NPM:n kautta. Käytä seuraavaa komentoa asentaaksesi sen.

 npm install cropperjs 

Rajaa kuvia JavaScript-sovelluksissa

Cropper-kirjasto antaa ohjelmoijille mahdollisuuden rajata kuvia ohjelmallisesti JavaScriptin avulla. Jotta voit rajata kuvan, sinun on ladattava kuva ja varmistettava, että kuvan koko sopii täydellisesti säiliöön. Kun kuva on valmis, voit suorittaa joukon rajaustoimintoja annetuille x- ja y-koordinaateille, mukaan lukien pyörittäminen, kääntäminen, skaalaus sekä korkeuden ja leveyden asettaminen tarpeidesi mukaan. .

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

Rajaa kuvia selaimessa JavaScriptin avulla

Voit lisätä kuvien rajaustoimintoja sovelluksiisi ja käyttäjät voivat rajata kuvia suoraan selaimesta. Käyttäjät voivat ladata tai vetää ja pudottaa kuvia selaimeen ja käyttää siihen rajausominaisuuksia. API tarjoaa selainten välisen yhteensopivuuden. API toimii hyvin uusimmalla Chrome-, Firefox-, Safari-, Opera-, Edge- ja Internet Explorer -versiolla.

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

Rajausmenetelmien käyttäminen JavaScriptissä

Joustavuuden tarjoamiseksi API tarjoaa joukon menetelmiä kuvien rajaamiseen. Nämä menetelmät auttavat kehittäjää lisäämään kuvan rajausominaisuuksia sovellukseen helposti. API tarjoaa menetelmän crop() kuvan rajaamiseen. Lisäksi voit käyttää reset(), clear(), korvaa(), enable(), disable(), tuhoa(), siirrä(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() ja paljon muuta.

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