如何使用 Cropper.js 设置图片裁剪区域的固定高度和宽度？

2024-03-24 07:25:58

使用 Cropper.js 设定图片裁剪区域的固定高度/宽度

引言：

图片裁剪在图像处理和编辑中至关重要。Cropper.js 是一个流行的 JavaScript 库，提供了一种轻松的方法来实现图像裁剪。本文将深入探讨如何使用 Cropper.js 设定图片裁剪区域的固定高度和宽度，从而限制用户只能移动裁剪区域而不能调整其大小。

问题：

在某些场景中，我们需要在图像上定义一个固定大小的裁剪区域。例如，我们可能需要从图像中提取特定形状或大小的头像或产品缩略图。默认情况下，Cropper.js 允许用户自由地调整裁剪区域的大小和位置。

解决方案：

为了创建固定大小的裁剪区域，我们需要禁用缩放和可拖动功能，同时设定初始裁剪区域的大小和位置。以下是逐步说明：

获取 Cropper.js 实例：

var cropper = new Cropper(image, options);

禁用缩放和可拖动：

options.scalable = false;
options.zoomable = false;

设定初始裁剪区域：

cropper.setData({
    x: xCoordinate,
    y: yCoordinate,
    width: desiredWidth,
    height: desiredHeight
});

防止用户修改裁剪区域：

$(image).on('cropstart.cropper', function (e) {
    e.preventDefault();
});

仅允许用户移动裁剪区域：

$(image).on('cropmove.cropper', function (e) {
    if (e.detail.action === 'move') {
        e.preventDefault();
    }
});

演示：

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

var cropper = new Cropper(image, {
    scalable: false,
    zoomable: false,
    ready: function () {
        // 设定初始裁剪区域
        cropper.setData({
            x: 100,
            y: 100,
            width: 500,
            height: 300
        });
    }
});