欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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的图片裁剪上传功能,希望对大家有所帮助