用于裁剪图像的 JavaScript API

Cropper 入门

通过 NPM 安装cropper 的推荐方式。请使用以下命令进行安装。

 npm install cropperjs 

在 JavaScript 应用程序中裁剪图像

Cropper 库使软件程序员能够使用 JavaScript 以编程方式裁剪图像。为了裁剪图像，您需要加载图像并确保图像的大小完全适合容器。准备好图像后，您可以在给定的 x 和 y 坐标上执行一组裁剪功能，包括根据您的要求旋转、翻转、缩放以及设置高度和宽度。 .

 // 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 在浏览器中裁剪图像

您可以在应用程序中添加图像裁剪功能，用户可以直接从浏览器裁剪图像。用户可以在浏览器中上传或拖放图像，并对其应用裁剪功能。 API 提供跨浏览器兼容性。该 API 使用最新版本的 Chrome、Firefox、Safari、Opera、Edge 和 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) );
});

在 JavaScript 中使用裁剪方法

为了提供灵活性，API 提供了一系列裁剪图像的方法。这些方法可帮助开发人员轻松地将图像裁剪功能添加到应用程序中。 API 提供了crop() 方法来裁剪图像。此外，您可以使用 reset()、clear()、replace()、enable()、disable()、destroy()、move()、zoom()、rotate()、scale()、getData()、setData ()、getCanvasData() 等。

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