最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
时间:2017-05-29 编辑:简简单单 来源:一聚教程网
一、前言
三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习。
图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期对于很多开发人员需要有个适应的过程,特别是初中级的前端处理业务逻辑方面的能力比较欠缺),二则提升用户体验。今天分享下在项目开发中写的的图片上传 vue组件。
二、处理问题
这里用h5做图片上传考虑到浏览器支持的问题,这里考虑的场景是在做webapp的时候
1.移动web图片上传还包括拍摄上传,但是在移动端会出现拍摄的照片会旋转,处理这个问题需要得到图片旋转的情况,可以用exif.js来获取,具体可以参看文档
2.图片压缩
3.旋转
三、代码
1组件代码
代码如下 | 复制代码 |
import EXIF from'../../../Resource/Global/Js/exif' exportdefault{ name:"image-html5-upload", props:{ imgArr:{ type:Array, twoWay:true, default:Array }, imgNumLimit:{//一次最多可以上传多少张照片 type:Number, default:4 } }, methods:{ "uploadImg":function(e){ let tag = e.target; let fileList = tag.files; let imgNum = fileList.length; let _this =this; _this.imgArr = [];//图片数据清零 if(this.imgArr.length + imgNum >this.imgNumLimit){ alert('一次最多上传'+this.imgNumLimit+'张图片!'); return; } varOrientation; for(let i=0;i EXIF.getData(fileList[i],function(){ Orientation = EXIF.getTag(fileList[i],'Orientation'); }); let reader =newFileReader(); reader.readAsDataURL(fileList[i]); reader.onload =function(){ varoReader =newFileReader(); oReader.onload =function(e) { varimage =newImage(); image.src = e.target.result; image.onload =function() { varexpectWidth =this.naturalWidth; varexpectHeight =this.naturalHeight; if(this.naturalWidth >this.naturalHeight &&this.naturalWidth > 800) { expectWidth = 800; expectHeight = expectWidth *this.naturalHeight /this.naturalWidth; }elseif(this.naturalHeight >this.naturalWidth &&this.naturalHeight > 1200) { expectHeight = 1200; expectWidth = expectHeight *this.naturalWidth /this.naturalHeight; } varcanvas = document.createElement("canvas"); varctx = canvas.getContext("2d"); canvas.width = expectWidth; canvas.height = expectHeight; ctx.drawImage(this, 0, 0, expectWidth, expectHeight); varbase64 =null; //修复ios上传图片的时候 被旋转的问题 if(Orientation !=""&& Orientation != 1){ switch(Orientation){ case6://需要顺时针(向左)90度旋转 _this.rotateImg(this,'left',canvas); break; case8://需要逆时针(向右)90度旋转 _this.rotateImg(this,'right',canvas); break; case3://需要180度旋转 _this.rotateImg(this,'right',canvas);//转两次 _this.rotateImg(this,'right',canvas); break; } } base64 = canvas.toDataURL("image/jpeg", 0.8); if(fileList[i].size / 1024000 > 1){ _this.imgScale(base64, 4) }else{ _this.imgArr.push({"src": base64}); } console.log(JSON.stringify(_this.imgArr)); }; }; oReader.readAsDataURL(fileList[i]); } } }, "imgScale":function(imgUrl,quality){ let img =newImage(); let _this =this; let canvas = document.createElement('canvas'); let cxt = canvas.getContext('2d'); img.src = imgUrl; img.onload =function(){ //缩放后图片的宽高 let width = img.naturalWidth/quality; let height = img.naturalHeight/quality; canvas.width = width; canvas.height = height; cxt.drawImage(this, 0, 0, width, height); _this.imgArr.push({"src": canvas.toDataURL('image/jpeg')}); } }, "rotateImg":function(img, direction,canvas) {//图片旋转 varmin_step = 0; varmax_step = 3; if(img ==null)return; varheight = img.height; varwidth = img.width; varstep = 2; if(step ==null) { step = min_step; } if(direction =='right') { step++; step > max_step && (step = min_step); }else{ step--; step < min_step && (step = max_step); } vardegree = step * 90 * Math.PI / 180; varctx = canvas.getContext('2d'); switch(step) { case0: canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0); break; case1: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, 0, -height); break; case2: canvas.width = width; canvas.height = height; ctx.rotate(degree); ctx.drawImage(img, -width, -height); break; case3: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, -width, 0); break; } } } } |
2.使用方法
代码如下 | 复制代码 |
|
-
上一个: js正则表达式验证表单的教程
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31