爱玩科技网
您的当前位置:首页cropperjs实现图片裁剪上传功能

cropperjs实现图片裁剪上传功能

来源:爱玩科技网


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

首先下载引入cropper js,


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

html的代码如下:


主要是js代码,如下

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


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


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


        
显示全文