在最近的项目中需要用到 cropperjs 这个第三方 npm 包, 用于做图片裁剪功能。
1. 在项目中如何使用呢?
1.1 在项目中安装依赖
npm i cropperjs -D
1.2 封装裁剪组件
在 main.ts
中,使用
...
import Cropperjs from "cropperjs";
import "cropperjs/dist/cropper.css";
...
创建 components/Cropper/index.vue
,在页面加载完成的时候调用 this.init()
方法,代码如下:
init () {
/* 初始化 cropperjs 实例 */
this.cropper = new Cropperjs(document.getElementById("imageRef"), {
dragMode: "move", /* 画布拖拽方式 */
autoCropArea: 0.9, /* 画布裁剪画布比例 */
restore: false,
guides: false,
center: true,
highlight: false,
cropBoxMovable: true,
cropBoxResizable: true,
toggleDragModeOnDblclick: false,
});
}
然后运行项目显示界面如下所示:
接下来填充一些常见的功能比如裁剪
、旋转
、获取处理后的图片资源数据
等等。
1.2.1 获取 cropperjs 处理后的图片
/* 获取图片资源, 格式为 base64 格式 */
getImageResource () {
this.resource = this.cropper.getCroppedCanvas().toDataURL("image/jpeg", 0.7);
}
1.2.2 旋转
cropperjs
的旋转方式支持两种,分别是是 rotate
和 rotateTo
。
rotate
是在上一步度数的基础上往上叠加旋转度数。
rotateTo
是以最初度数为准进行旋转。
/* 旋转图片 */
rotate (num) {
this.cropper.rotate(num);
}
1.2.3 裁剪
当我们需要使用裁剪功能的时候,我们可以在初始化的时候,将参数定义上去
将 cropBoxMovable
和 cropBoxResizable
设置为 true
就可以了。
1.2.4 预览功能
cropperjs
的预览功能需要开发者提供一个空容器,cropperjs
会自动将预览的 DOM 元素放置到这个容器中。
2. 查阅开源代码
git clone https://github.com/fengyuanchen/cropperjs.git
下载完成之后使用 pnpm 安装依赖
pnpm i
⚠️ 学堂小知识
之前了解pnpm
这个包管理工具用了一些还是可以的,个人比较喜欢它的打印风格,特别好看 🎆!!!同时,相对于yarn
和npm
来说,它安装包的速度很快,还优化了node_modules
空间。可通过find . -type f | wc -l
来查看文件数量
2.1 项目目录结构
执行 npm run start
会生成 docs
文件
打开 index.html
文件,在浏览器上进行预览
看这项目结构,一眼看出,我们主要需要看的就是 src
文件了,那下面我们来看看这里面有什么吧!!!
2.2 够够的代码
项目结构还是很清晰的,按照不同的职能拆分成不同的代码文件🌈~
2.2.1 初始化
从这里可以看出,当我们在代码中用到 cropperjs
的时候,需要通过 new cropperjs(Element, { ... })
这种方式去初始化。Element 需要是 img
或 Canvas
元素,不然就会报错。
初始化完成之后,会调用 this.init()
。
这里主要的目的是用于获取原来 img
或 canvas
上所携带的 图片信息
。获取到图片信息
之后,会对插件进行 load
操作。
相对于 load 方法来说,这边的代码就比较长了,就大体列举一下几个实现点:
首先,会对图片信息格式进行校验,根据不同的类型的图片进行相对应的数据格式判断,根据不同类型的格式进行逻辑处理。
获取到原数据之后,针对原来的图片数据。对图片进行 clone
操作,图片处理完成之后,开始绘制展示 DOM 元素。
然后初始化结束了。整理项目流程图如下图: