cropper js基于vue的图片裁剪上传功能的实现代码


Posted in Javascript onMarch 01, 2018

前些日子做了一个项目关于vue项目需要头像裁剪上传功能,看了一篇文章,在此基础上做的修改完成了这个功能,与大家分享一下。原文:https://3water.com/article/135719.htm

首先下载引入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上下载https://github.com/leileibrother/cropper-js-vue-。

总结

以上所述是小编给大家介绍的cropper js基于vue的图片裁剪上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery+json实现的搜索加分页效果
Mar 31 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
Vuex中mutations与actions的区别详解
Mar 01 #Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 #Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 #Javascript
详解Immutable及 React 中实践
Mar 01 #Javascript
解决VUEX兼容IE上的报错问题
Mar 01 #Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 #Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 #Javascript
You might like
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
Google 静态地图API实现代码
2010/11/19 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python列表操作方法详解
2020/02/09 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
python爬虫基础知识点整理
2020/06/02 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
环境工程毕业生自荐信
2013/11/17 职场文书
环保口号大全
2014/06/12 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS