【亲测免费】 Cropper.js 使用教程

2026-01-16 10:15:24作者：霍妲思

1. 项目的目录结构及介绍

Cropper.js 是一个用于图像裁剪的 JavaScript 库。以下是其基本的目录结构：

cropperjs/
├── dist/
│   ├── cropper.css
│   ├── cropper.min.css
│   ├── cropper.js
│   ├── cropper.min.js
│   └── cropper.esm.js
├── src/
│   ├── cropper.scss
│   ├── cropper.js
│   └── index.js
├── docs/
├── examples/
├── test/
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

目录介绍：

dist/：包含编译后的文件，如 cropper.css、cropper.min.css、cropper.js、cropper.min.js 和 cropper.esm.js。
src/：源代码目录，包含 cropper.scss 和 cropper.js。
docs/：文档目录。
examples/：示例目录。
test/：测试目录。
.babelrc：Babel 配置文件。
.editorconfig：编辑器配置文件。
.eslintrc：ESLint 配置文件。
.gitignore：Git 忽略文件配置。
.npmignore：NPM 忽略文件配置。
.travis.yml：Travis CI 配置文件。
LICENSE：项目许可证。
package.json：项目依赖和脚本配置。
README.md：项目说明文档。
webpack.config.js：Webpack 配置文件。

2. 项目的启动文件介绍

Cropper.js 的启动文件主要是 dist/ 目录下的文件。通常情况下，你只需要引入以下文件即可开始使用：

<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cropper.js 示例</title>
  <link href="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.css" rel="stylesheet">
</head>
<body>
  <div>
    <img id="image" src="picture.jpg">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const image = document.getElementById('image');
      new Cropper(image, {
        aspectRatio: 16 / 9,
        crop(event) {
          console.log(event.detail.x);
          console.log(event.detail.y);
          console.log(event.detail.width);
          console.log(event.detail.height);
          console.log(event.detail.rotate);
          console.log(event.detail.scaleX);
          console.log(event.detail.scaleY);
        },
      });
    });
  </script>
</body>
</html>

3. 项目的配置文件介绍

Cropper.js 的配置文件主要是 package.json 和 webpack.config.js。

`package.json`：

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键部分：

{
  "name": "cropperjs",
  "version": "1.6.2",
  "description": "JavaScript image cropper.",
  "main": "dist/cropper.js",
  "module": "dist/cropper.esm.js",
  "scripts": {
    "build":