cropper js基于vue的图片裁剪上传功能的实现代码
程序员文章站
2022-04-15 20:01:43
前些日子做了一个项目关于vue项目需要头像裁剪上传功能,看了一篇文章,在此基础上做的修改完成了这个功能,与大家分享一下。原文:
首先下载引入cropper js,...
前些日子做了一个项目关于vue项目需要头像裁剪上传功能,看了一篇文章,在此基础上做的修改完成了这个功能,与大家分享一下。原文:
首先下载引入cropper js,
npm install cropper js --save
在需要的页面引入:import cropper from "cropper js"
html的代码如下:
<template> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel"> <div> <img id="image" :src="url" alt="picture"> </div> <button type="button" id="button" @click="commit">确定</button> <button type="button"id="cancel" @click="cancel">取消</button> </div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backgroundimage:url('+headerimage+')'"> </div> </div> <div style="margin-top:20px;text-align: left;"> <input type="file" id="change" accept="image" @change="change"> <label for="change"></label> </div> </div> </div> </template>
主要是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("上传成功"); //这边写图片的上传 } }
css样式代码就不贴出来了,可以到github上下载-。
总结
以上所述是小编给大家介绍的cropper js基于vue的图片裁剪上传功能,希望对大家有所帮助
上一篇: Java中的抽象类介绍
下一篇: H5页面基于接口实现数据交互