这篇文章主要介绍了cropper js基于vue的图片裁剪上传功能的相关资料,需要的朋友可以参考下
前些日子做了一个项目关于vue项目需要头像裁剪上传功能，看了一篇文章，在此基础上做的修改完成了这个功能，与大家分享一下。原文：http://www.jb51.net/article/135719.htm
首先下载引入cropper js，
npm install cropper js --save
登录后复制
在需要的页面引入：import Cropper from “cropper js”
立即学习“前端免费学习笔记（深入）”；
html的代码如下：
登录后复制
主要是js代码，如下
1，data里面定好初始变量，绑定数据，imgCropperData是我定义的判断图片格式的。
data() { return { headerImage: "", picValue: "", cropper: "", croppable: false, panel: false, url: "", imgCropperData: { accept: "image/gif, image/jpeg, image/png, image/jpg" } }; }登录后复制
2，在mounted里面初始换裁剪框
mounted() { //初始化这个裁剪框 var self = this; var image = document.getElementById("image"); this.cropper = new Cropper(image, { aspectRatio: 1, viewMode: 1, background: false, zoomable: false, ready: function() { self.croppable = true; } }); }登录后复制
3.methods的方法比较多，包括创建URL路径，input框change事件，canvas画图，确定提交上传。我还加了取消事件函数，判断上传文件的类型和大小。
methods: { //取消上传 cancel() { this.panel = false; var obj = document.getElementById('change') ; obj.outerHTML=obj.outerHTML; }, //创建url路径 getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; }, //input框change事件，获取到上传的文件 change(e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return; let type = files[0].type; //文件的类型，判断是否是图片 let size = files[0].size; //文件的大小，判断图片的大小 if (this.imgCropperData.accept.indexOf(type) == -1) { alert("请选择我们支持的图片格式！"); return false; } if (size > 5242880) { alert("请选择5M以内的图片！"); return false; } this.picValue = files[0]; this.url = this.getObjectURL(this.picValue); //每次替换图片要重新得到新的url if (this.cropper) { this.cropper.replace(this.url); } this.panel = true; }, //确定提交 commit() { this.panel = false; var croppedCanvas; var roundedCanvas; if (!this.croppable) { return; } // Crop croppedCanvas = this.cropper.getCroppedCanvas(); // Round roundedCanvas = this.getRoundedCanvas(croppedCanvas); this.headerImage = roundedCanvas.toDataURL(); //上传图片 this.postImg(); }, //canvas画图 getRoundedCanvas(sourceCanvas) { var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); var width = sourceCanvas.width; var height = sourceCanvas.height; canvas.width = width; canvas.height = height; context.imageSmoothingEnabled = true; context.drawImage(sourceCanvas, 0, 0, width, height); context.globalCompositeOperation = "destination-in"; context.beginPath(); context.arc( width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true ); context.fill(); return canvas; }, //提交上传函数 postImg() { alert("上传成功"); //这边写图片的上传 } }登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何在vue2中设置全局变量？（详细教程）
如何在JS中实现字符串拼接的功能（扩展String.prototype.format）
利用ES6通过WeakMap解决内存泄漏问题（详细教程）
以上就是在cropper中js通过vue的图片裁剪上传功能如何实现的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2750982.html
