【亲测免费】 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'}));
        });
});

4. 典型生态项目

Vue.js集成：vue-cropper
React.js集成：react-cropper
Angular.js集成：ngx-cropper
jQuery插件：jQuery-Cropper

以上就是对Cropper.js的基本介绍和使用示例。在实际开发过程中，可以根据具体需求探索更多配置项和API，以满足各种复杂的图片裁剪场景。如需了解更多详细信息，请参阅官方文档：https://fengyuanchen.github.io/cropperjs/docs/。

cropper

⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper

项目地址：https://gitcode.com/gh_mirrors/cr/cropper

登录后查看全文

【亲测免费】 Cropper.js 教程

1. 项目介绍

2. 项目快速启动

3. 应用案例和最佳实践

圆形裁剪

裁剪结果保存

4. 典型生态项目

热门内容推荐

最新内容推荐

项目优选

【亲测免费】 Cropper.js 教程

1. 项目介绍

2. 项目快速启动

3. 应用案例和最佳实践

圆形裁剪

裁剪结果保存

4. 典型生态项目

相关内容推荐

热门内容推荐

最新内容推荐

项目优选