API JavaScript để cắt hình ảnh

Bắt đầu với Cropper

Cách được khuyến nghị để cài đặt cropper qua NPM. Vui lòng sử dụng lệnh sau để cài đặt nó.

 npm install cropperjs 

Cắt hình ảnh bên trong ứng dụng JavaScript

Thư viện Cropper cung cấp cho các nhà lập trình phần mềm khả năng cắt hình ảnh của họ theo cách lập trình bằng JavaScript. Để cắt hình ảnh, bạn cần tải hình ảnh và đảm bảo rằng kích thước của hình ảnh hoàn toàn phù hợp với vùng chứa. Sau khi đã chuẩn bị xong hình ảnh, bạn có thể thực hiện một tập hợp các tính năng cắt xén trên các tọa độ x và y nhất định bao gồm xoay, lật, chia tỷ lệ và thiết lập chiều cao và chiều rộng theo yêu cầu của bạn. .

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

Cắt hình ảnh trong trình duyệt bằng JavaScript

Bạn có thể thêm chức năng cắt ảnh trong ứng dụng của mình và người dùng có thể cắt ảnh trực tiếp từ trình duyệt. Người dùng có thể tải lên hoặc kéo thả hình ảnh trong trình duyệt và áp dụng các tính năng cắt xén cho nó. API cung cấp khả năng tương thích trên nhiều trình duyệt. API hoạt động tốt khi sử dụng phiên bản mới nhất của Chrome, Firefox, Safari, Opera, Edge và 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) );
});

Sử dụng phương pháp cắt xén trong JavaScript

Để cung cấp tính linh hoạt, API cung cấp một loạt các phương pháp để cắt hình ảnh. Các phương pháp này giúp nhà phát triển thêm tính năng cắt ảnh vào ứng dụng một cách dễ dàng. API cung cấp phương thức crop () để cắt hình ảnh. Hơn nữa, bạn có thể sử dụng reset (), clear (), Replace (), enable (), vô hiệu hóa (), tiêu diệt (), di chuyển (), thu phóng (), xoay (), scale (), getData (), setData (), getCanvasData () và hơn thế nữa.

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