在 vue tsx 中使用 cropperjs

1,343

在最近的项目中需要用到 cropperjs 这个第三方 npm 包, 用于做图片裁剪功能。

cropperjs 在线体验地址

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,
  });
}

然后运行项目显示界面如下所示:

image.png

接下来填充一些常见的功能比如裁剪旋转获取处理后的图片资源数据等等。

1.2.1 获取 cropperjs 处理后的图片

/* 获取图片资源, 格式为 base64 格式 */
getImageResource () {
  this.resource = this.cropper.getCroppedCanvas().toDataURL("image/jpeg", 0.7);
}

1.2.2 旋转

cropperjs 的旋转方式支持两种,分别是是 rotaterotateTo
rotate 是在上一步度数的基础上往上叠加旋转度数。
rotateTo 是以最初度数为准进行旋转。

/* 旋转图片 */
rotate (num) {
  this.cropper.rotate(num);
}

1.2.3 裁剪

当我们需要使用裁剪功能的时候,我们可以在初始化的时候,将参数定义上去

image.png

cropBoxMovablecropBoxResizable 设置为 true 就可以了。

1.2.4 预览功能

cropperjs 的预览功能需要开发者提供一个空容器,cropperjs 会自动将预览的 DOM 元素放置到这个容器中。

image.png

image.png

2. 查阅开源代码

源代码:cropperjs github 开源代码地址

git clone https://github.com/fengyuanchen/cropperjs.git

下载完成之后使用 pnpm 安装依赖

pnpm i

⚠️ 学堂小知识
之前了解 pnpm 这个包管理工具用了一些还是可以的,个人比较喜欢它的打印风格,特别好看 🎆!!!同时,相对于 yarnnpm 来说,它安装包的速度很快,还优化了 node_modules 空间。可通过 find . -type f | wc -l 来查看文件数量

2.1 项目目录结构

image.png

执行 npm run start 会生成 docs 文件

image.png

打开 index.html 文件,在浏览器上进行预览

image.png

看这项目结构,一眼看出,我们主要需要看的就是 src 文件了,那下面我们来看看这里面有什么吧!!!

2.2 够够的代码

image.png

项目结构还是很清晰的,按照不同的职能拆分成不同的代码文件🌈~

2.2.1 初始化

image.png

从这里可以看出,当我们在代码中用到 cropperjs 的时候,需要通过 new cropperjs(Element, { ... }) 这种方式去初始化。Element 需要是 imgCanvas 元素,不然就会报错。

初始化完成之后,会调用 this.init()。 这里主要的目的是用于获取原来 imgcanvas 上所携带的 图片信息。获取到图片信息之后,会对插件进行 load 操作。

image.png

相对于 load 方法来说,这边的代码就比较长了,就大体列举一下几个实现点:

首先,会对图片信息格式进行校验,根据不同的类型的图片进行相对应的数据格式判断,根据不同类型的格式进行逻辑处理。

image.png

image.png

获取到原数据之后,针对原来的图片数据。对图片进行 clone 操作,图片处理完成之后,开始绘制展示 DOM 元素。

image.png

image.png

然后初始化结束了。整理项目流程图如下图:

image.png