Cropper.js 安装与使用指南

2026-01-16 09:39:39作者：邬祺芯Juliet

目录结构概览

当你通过 Git 克隆了 Cropper.js 的仓库之后, 你会看到以下的目录结构:

.
├── dist          # 包含编译后的 JavaScript 和 CSS 文件。
│   ├── css      # 包含编译后的 CSS 样式表。
│   └── js        # 包含编译后的 JavaScript 脚本。
├── examples      # 示例代码目录, 提供了各种 Cropper 使用场景的示例。
│   └── index.html # 主要示例页面
├── src           # 源代码目录, 包含原始开发源码。
│   ├── css      # 原始样式表代码。
│   └── js        # 原始脚本代码。
└── test          # 测试代码目录, 包含自动化测试相关的文件。

解析

dist : 这个目录包含了经过打包处理的最终 JS 和 CSS 文件，是部署到生产环境的资源所在。
examples: 该目录里有多个 HTML 页面，展示了如何在不同的场景下利用 Cropper.js 。例如设定不同长宽比裁切，圆角图片裁切等操作。
src : 此目录中包含了未经压缩和打包的开发阶段代码. 这里的文件可以被修改以适应特殊需求或用于调试。
test: 在这个目录下放置的是单元测试和集成测试文件，以确保 Cropper.js 库的功能正确性。

启动文件解析

对于新手开发者来说，examples/index.html 是非常重要的入门点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入CSS样式 -->
    <link rel="stylesheet" href="./css/cropper.css">
    <!-- 引入JS库 -->
    <script src="./js/cropper.min.js"></script>
</head>
<body>

<!-- 展示图像的地方 -->
<img id="image" src="image.jpg" alt="Image">

<!-- 指定一个容器来显示可编辑的剪辑区域 -->
<div id="cropper"></div>

<script>
// 加载图片并实例化Cropper对象
const img = document.getElementById('image');
const cropper = new Cropper(img);

// 可以进一步设置属性例如长宽比, 是否开启移动, 缩放等功能
cropper.setAspectRatio(16 / 9); // 设置裁剪框的比例
</script>

</body>
</html>

这个文件提供了Cropper.js的基本使用框架, 并且演示了如何加载一张图片以及如何初始化Cropper类来对这张图片进行裁剪。

配置文件解析

Cropper.js没有单独的配置文件,因为所有配置选项都可以通过JavaScript API调用来传递。但是，在src/js/cropper.js文件中有默认设置定义。这些设置控制着Cropper的初始行为和功能：

// 默认配置项
var DEFAULTS = {
    aspectRatio: null,
    autoCropArea: 0.8,
    dragCrop: true,
    dragMode: 'crop',
    highlight: false,
    minContainerWidth: 256,
    // 更多配置...
};

// 创建Cropper对象时可以通过参数覆盖这些默认值
new Cropper(element, options);

在这里可以看到Cropper.js提供的默认配置项，比如默认长宽比(aspectRatio)、自动裁剪区域大小(autoCropArea)、是否允许拖拽裁剪(dragCrop)等。当创建Cropper对象时，你可以传入一个配置对象来覆盖这些默认值。例如，为了禁用拖拽裁剪并且将长宽比设置为1:1，可以这样做：

const cropper = new Cropper(imageElement, {
    dragCrop: false,
    aspectRatio: 1,
});

总结起来, Cropper.js的设计理念是灵活但简约。它不依赖于外部配置文件，而是将其配置机制融入到了JavaScript接口中。这使得Cropper.js不仅易于集成到现有的网页应用中，而且也方便开发者按需定制裁剪功能。

cropper

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

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

登录后查看全文

Cropper.js 安装与使用指南

目录结构概览

解析

启动文件解析

配置文件解析

项目优选