这篇文章主要介绍了cropper js基于vue的图片裁剪上传功能的相关资料,需要的朋友可以参考下
前些日子做了一个项目关于vue项目需要头像裁剪上传功能,看了一篇文章,在此基础上做的修改完成了这个功能,与大家分享一下。原文:http://www.jb51.net/article/135719.htm
首先下载引入cropper js,
1 |
|
在需要的页面引入:import Cropper from "cropper js"
html的代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
主要是js代码,如下
1,data里面定好初始变量,绑定数据,imgCropperData是我定义的判断图片格式的。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
2,在mounted里面初始换裁剪框
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
3.methods的方法比较多,包括创建URL路径,input框change事件,canvas画图,确定提交上传。我还加了取消事件函数,判断上传文件的类型和大小。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
|
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
如何在JS中实现字符串拼接的功能(扩展String.prototype.format)
以上是在cropper中js通过vue的图片裁剪上传功能如何实现的详细内容。更多信息请关注PHP中文网其他相关文章!