【亲测免费】 Cropper.js 教程

2026-01-16 10:16:02作者：牧宁李

1. 项目介绍

Cropper.js 是一个轻量级的JavaScript图片裁剪库，它提供了丰富的功能和良好的可定制性。这个库主要用于在网页上进行图像的裁剪操作，支持响应式布局，以及多种裁剪比例，旋转，缩放等操作。其目标是帮助开发者轻松地实现用户友好的图片编辑体验。

2. 项目快速启动

首先，确保已安装Node.js环境。接下来，通过npm安装Cropper.js：

npm install cropperjs

然后，在你的HTML文件中引入所需的资源：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="node_modules/cropperjs/dist/cropper.css">
</head>
<body>
    <img id="image" src="your-image-source.jpg">
    <script src="node_modules/cropperjs/dist/cropper.js"></script>
    <script>
        var cropper = new Cropper(document.getElementById('image'), {
            aspectRatio: 1 / 1, // 设置裁剪框的宽高比
            viewMode: 0,
            preview: '.preview',
        });
    </script>
</body>
</html>

上述代码创建了一个新的Cropper实例，针对id为image的图片元素进行裁剪，并设置裁剪框的比例为1:1。viewMode选项控制视图模式，preview定义预览区域。

3. 应用案例和最佳实践

圆形裁剪

要实现圆形裁剪，可以通过设置cropper.setCropBoxData()方法来调整裁剪框的宽度和高度相等，并隐藏多余部分：

var circleCrop = function() {
    var cropBoxData = cropper.getCropBoxData();
    var canvasData = cropper.getCanvasData();

    cropper.setCropBoxData({
        width: cropBoxData.width,
        height: cropBoxData.width
    });

    cropper.setCanvasData({
        left: canvasData.left + (cropBoxData.height - cropBoxData.width) / 2,
        top: canvasData.top + (cropBoxData.height - cropBoxData.width) / 2,
        width: cropBoxData.width,
        height: cropBoxData.width
    });
};

document.getElementById('circle-crop').addEventListener('click', circleCrop);

裁剪结果保存

可以使用cropper.getCroppedCanvas()方法获取裁剪后的canvas对象，然后将其转换成Base64编码或Blob并上传到服务器：

document.getElementById('save-crop').addEventListener('click', function () {
    cropper.getCroppedCanvas().toDataURL('image/jpeg')
        .then(function(dataUrl) {
            var img = document.createElement('img');
            img.src = dataUrl;
            document.body.appendChild(img);

            // 或者将数据发送到服务器
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload/image', true);
            xhr.setRequestHeader('Content-Type', 'application/octet-stream');
            xhr.send(new Blob([dataUrl.replace(/^data:image\/(png|jpeg|jpg);base64,/, '')], {type: 'application/octet-stream'}));
        });
});