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 相关文章推荐
JavaScript 变量命名规则
Sep 23 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
JS加载解析Markdown文档过程详解
May 19 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
坏狼的PHP学习教程之第2天
2008/06/15 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
ExtJS 入门
2010/10/29 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
Python 异常处理的实例详解
2017/09/11 Python
快速了解Python中的装饰器
2018/01/11 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python、Matlab求定积分的实现
2019/11/20 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
个人安全生产责任书
2014/07/28 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
mysql的数据压缩性能对比详情
2021/11/07 MySQL