Görüntüleri Kırpmak için JavaScript API'si

Cropper'a Başlarken

Kırpıcıyı NPM aracılığıyla kurmanın önerilen yolu. Lütfen yüklemek için aşağıdaki komutu kullanın.

 npm install cropperjs 

JavaScript Uygulamalarındaki Resimleri Kırp

Cropper kitaplığı, yazılım programcılarına JavaScript kullanarak görüntülerini programlı olarak kırpma yeteneği verir. Bir görüntüyü kırpmak için görüntüyü yüklemeniz ve görüntünün boyutunun kaba tam olarak uyduğundan emin olmanız gerekir. Resminizi hazırladıktan sonra, verilen x ve y koordinatlarında döndürme, çevirme, ölçekleme ve gereksinimlerinize göre yükseklik ve genişlik ayarlama dahil olmak üzere bir dizi kırpma özelliği gerçekleştirebilirsiniz. .

 // 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 kullanarak Tarayıcıda Görüntüleri Kırpma

Uygulamalarınıza görüntü kırpma işlevi ekleyebilirsiniz ve kullanıcılar görüntüleri doğrudan tarayıcıdan kırpabilir. Kullanıcılar tarayıcıya görüntüleri yükleyebilir veya sürükleyip bırakabilir ve buna kırpma özellikleri uygulayabilir. API, tarayıcılar arası uyumluluk sağlar. API, Chrome, Firefox, Safari, Opera, Edge ve Internet Explorer'ın en son sürümünü kullanarak sorunsuz çalışır.

 //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'te Kırpma Yöntemlerini Kullanma

API, esneklik sağlamak için görüntüleri kırpmak için bir dizi yöntem sağlar. Bu yöntemler, geliştiricinin uygulamaya kolayca görüntü kırpma özellikleri eklemesine yardımcı olur. API, görüntüyü kırpmak için kırpma() yöntemini sağlar. Ayrıca reset(), clear(), replace(), enable(), disable(), destroy(), move(), zoom(), döndürme(), scale(), getData(), setData kullanabilirsiniz. (), getCanvasData() ve daha fazlası.

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