在cropper中js通过vue的图片裁剪上传功能如何实现

前些日子做了一个项目关于vue项目需要头像裁剪上传功能，看了一篇文章，在此基础上做的修改完成了这个功能，与大家分享一下。原文：http://www.gxlcms.com/article/135719.htm

首先下载引入cropper js，

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

html的代码如下：

主要是js代码，如下

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

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

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

如何在vue2中设置全局变量？（详细教程）

如何在JS中实现字符串拼接的功能（扩展String.prototype.format）

利用ES6通过WeakMap解决内存泄漏问题（详细教程）

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