裁剪图片，如此easy？Cropper.js助你秒变修图达人

前端

2023-11-28 21:28:21

使用 Cropper.js 进行高级图片裁剪：实现固定宽高裁切和功能限制

简介

图片裁剪是图像编辑中的基本操作，而 Cropper.js 是一个功能强大的 JavaScript 库，可以轻松实现各种裁剪功能，包括固定宽高裁切和限制用户对裁剪框的操作。

Cropper.js 介绍

Cropper.js 是一个开源图像裁剪库，提供了简单易用的 API 来进行各种裁剪操作，包括：

裁剪固定宽高图像
禁用裁剪框大小调整
禁止缩放图像
禁止重新框选

固定宽高图片裁切

要使用 Cropper.js 裁剪固定宽高图像，只需在初始化库时设置裁剪框的宽高比例即可。例如：

var cropper = new Cropper(image, {
  aspectRatio: 16 / 9, // 指定裁剪框宽高比为 16:9
  minCropBoxWidth: 100, // 设置最小裁剪框宽度为 100 像素
  minCropBoxHeight: 100, // 设置最小裁剪框高度为 100 像素
});

禁用裁剪框调整、缩放和重新框选

要禁用裁剪框调整、缩放和重新框选，请在初始化 Cropper.js 时设置相应的选项：

var cropper = new Cropper(image, {
  cropBoxResizable: false, // 禁用裁剪框大小调整
  zoomable: false, // 禁用图像缩放
  rotatable: false // 禁用图像旋转
});

高级技巧：使用选项自定义裁剪体验

Cropper.js 提供了各种选项来定制裁剪体验，包括：

viewMode：设置裁剪框的可视化模式（例如 0、1 或 2）
dragMode：设置拖动模式（例如 "crop" 或 "move"）
modal：创建模态对话框以显示裁剪结果
responsive：启用响应式设计以调整裁剪框大小以适应容器

示例代码

下面是一个使用 Cropper.js 裁剪固定宽高图像并禁用裁剪框调整的示例代码：

<img id="image" src="image.jpg">

var cropper = new Cropper(document.getElementById('image'), {
  aspectRatio: 16 / 9,
  cropBoxResizable: false,
  zoomable: false,
  rotatable: false
});

document.getElementById('crop-button').addEventListener('click', function() {
  cropper.crop().then(function(result) {
    // 处理裁剪后的图像
  });
});