API JavaScript untuk Pangkas Imej

Bermula dengan Cropper

Cara yang disyorkan untuk memasang pemangkas melalui NPM. Sila gunakan arahan berikut untuk memasangnya.

 npm install cropperjs 

Pangkas Imej dalam Apl JavaScript

Pustaka Cropper memberi pengaturcara perisian keupayaan untuk memangkas imej mereka secara pemrograman menggunakan JavaScript. Untuk memangkas imej, anda perlu memuatkan imej dan memastikan saiz imej sesuai dengan bekas dengan sempurna. Selepas anda menyediakan imej anda, anda boleh melakukan satu set ciri pemangkasan pada koordinat x dan y yang diberikan termasuk berputar, membalikkan, menskala dan menetapkan ketinggian dan lebar mengikut keperluan anda. .

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

Pangkas Imej dalam Pelayar menggunakan JavaScript

Anda boleh menambah fungsi pemangkasan imej dalam apl anda dan pengguna boleh memangkas imej terus daripada penyemak imbas. Pengguna boleh memuat naik atau seret-lepas imej dalam penyemak imbas dan menggunakan ciri pemangkasan padanya. API menyediakan keserasian merentas pelayar. API berfungsi dengan baik menggunakan versi terkini Chrome, Firefox, Safari, Opera, Edge dan Internet Explorer.

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

Menggunakan Kaedah Pemotongan dalam JavaScript

Untuk memberikan fleksibiliti, API menyediakan sekumpulan kaedah untuk memangkas imej. Kaedah ini membantu pembangun menambah ciri pemangkasan imej pada aplikasi dengan mudah. API menyediakan kaedah crop() untuk memangkas imej. Tambahan pula, anda boleh menggunakan reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), rotate(), scale(), getData(), setData (), getCanvasData() dan banyak lagi.

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