cropperjs实现图片裁剪上传功能

首先下载引入cropper js，

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

html的代码如下：

主要是js代码，如下

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

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

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

相关推荐：

怎样实现前端裁剪上传图片功能

PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)

vue中如何使用cropperjs

以上就是cropper js实现图片裁剪上传功能的详细内容，更多请关注Gxl网其它相关文章！