cropperjs实现图片裁剪上传功能

来源：华拓科技网

本文主要和大家介绍了cropper js基于vue的图片裁剪上传功能的相关资料,希望能帮助到大家。

首先下载引入cropper js，

在需要的页面引入：import Cropper from "cropper js"

html的代码如下：

主要是js代码，如下

1，data里面定好初始变量，绑定数据，imgCropperData是我定义的判断图片格式的。

2，在mounted里面初始换裁剪框

3.methods的方法比较多，包括创建URL路径，input框change事件，canvas画图，确定提交上传。我还加了取消事件函数，判断上传文件的类型和大小。