vue3+vant+cropper.js实现移动端图片裁剪功能

01前言

最近做项目中遇到一个需求，需要对海报图片按照一定的比例进行裁剪并上传到oss。一开始这个需求思路有两个，使用canvas原生或者寻找现成的第三方库，对比了一番觉得canvas实现时间耗费较长，且秉承着不重复造轮子的原则（其实是菜）。

在进行技术调研后，决定使用vue-cropper插件来实现，预想会顺利，可结果恰恰相反！安装vue-cropper设置参数封装完组件后，发现裁剪框和裁剪的图片在h5页面上不能拖动，在web页面上可以，看源码里面也有兼容移动端的方法代码，在github上的issue里面也没发现有人遇到相同问题，难道就我遇到了？问度娘发现大家都可以，为什么我的就不行呢？后来又使用了vue-cropper-h5，也存在各种问题。其实，vue-cropper、vue-cropper-h5、vue-cropperjs等插件都是基于cropper.js实现的，最终决定使用cropper.js去实现。官方封装了很多参数、方法、事件，上手容易，文档阅读体验较好、而且便于扩展。下面就来详细介绍一个cropper.js的详细用法吧

cropper.js可以对指定的图片进行裁剪，可以自己选择裁剪的交互方式，如大小、纵横比等，裁剪后可以生成一个包含裁剪图的canvas对象，借助canvas的toDataURL方法可以生成一张Base64格式的图片，再通过toBlob转换成blob类型文件，再通过new File()，转换成file文件上传，当然也可以直接上传裁剪后生成的base64。还有另外一种不使用canvas的方式，利用该工具丰富的api可以拿到裁剪区域相对于原图的各项数据，使用这些数据进行css绝对定位即可展示裁剪后的图，该方式可以保证图片不失真和完整。

02项目环境

1.node

v16.0.0

2.vue

"vue": "^3.2.45"

3.vant

"vant": "^4.0.2"

4.cropper.js

"cropperjs": "^1.5.13"

03使用

1. 安装

yarn add cropperjs

2.引入，要导入样式，不然不会生效

import Cropp