Cropper.js 使用教程
cropperjsJavaScript image cropper.项目地址:https://gitcode.com/gh_mirrors/cr/cropperjs
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":
cropperjsJavaScript image cropper.项目地址:https://gitcode.com/gh_mirrors/cr/cropperjs