vue2实现移动端上传、预览、压缩图片解决拍照旋转问题


Posted in Javascript onApril 13, 2017

因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传。在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题引入了exif去判断拍照时的信息再去处理图片,这是个很好的插件。关于exif.js可以去他的GitHub上了解,这边直接 npm install exif-js --save   安装,然后import一下就可以使用了。以下就是源码,可以直接使用。

<template> 
 <div> 
 <div style="padding:20px;"> 
 <div class="show"> 
 <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div> 
 </div> 
 <div style="margin-top:20px;"> 
 <input type="file" id="upload" accept="image" @change="upload"> 
 <label for="upload"></label> 
 </div> 
 </div> 
 </div> 
</template> 
<script> 
import Exif from 'exif-js' 
export default { 
 data () { 
 return { 
 headerImage:'', 
 } 
 }, 
 mounted () { 
 }, 
 methods: { 
 upload (e) { 
 let files = e.target.files || e.dataTransfer.files; 
 if (!files.length) return; 
 this.picValue = files[0]; 
 this.imgPreview(this.picValue); 
 }, 
 imgPreview (file) { 
 let self = this; 
 let Orientation; 
 //去获取拍照时的信息,解决拍出来的照片旋转问题 
 Exif.getData(file, function(){ 
  Orientation = Exif.getTag(this, 'Orientation'); 
 }); 
 // 看支持不支持FileReader 
 if (!file || !window.FileReader) return; 
 if (/^image/.test(file.type)) { 
  // 创建一个reader 
  let reader = new FileReader(); 
  // 将图片2将转成 base64 格式 
  reader.readAsDataURL(file); 
  // 读取成功后的回调 
  reader.onloadend = async function () { 
  let result = this.result; 
  let img = new Image(); 
  img.src = result; 
  //判断图片是否大于100K,是就直接上传,反之压缩图片 
  if (this.result.length <= (100 * 1024)) { 
  self.headerImage = this.result; 
  self.postImg(); 
  }else { 
  img.onload = function () { 
  let data = self.compress(img,Orientation); 
  self.headerImage = data; 
  self.postImg(); 
  } 
  } 
  } 
 } 
 }, 
 postImg () { 
 //这里写接口 
 }, 
 rotateImg (img, direction,canvas) { 
 //最小与最大旋转方向,图片旋转4次后回到原方向 
 const min_step = 0; 
 const max_step = 3; 
 if (img == null)return; 
 //img的高度和宽度不能在img元素隐藏后获取,否则会出错 
 let height = img.height; 
 let width = img.width; 
 let step = 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); 
 } 
 //旋转角度以弧度值为参数 
 let degree = step * 90 * Math.PI / 180; 
 let ctx = canvas.getContext('2d'); 
 switch (step) { 
  case 0: 
  canvas.width = width; 
  canvas.height = height; 
  ctx.drawImage(img, 0, 0); 
  break; 
  case 1: 
  canvas.width = height; 
  canvas.height = width; 
  ctx.rotate(degree); 
  ctx.drawImage(img, 0, -height); 
  break; 
  case 2: 
  canvas.width = width; 
  canvas.height = height; 
  ctx.rotate(degree); 
  ctx.drawImage(img, -width, -height); 
  break; 
  case 3: 
  canvas.width = height; 
  canvas.height = width; 
  ctx.rotate(degree); 
  ctx.drawImage(img, -width, 0); 
  break; 
 } 
 }, 
 compress(img,Orientation) { 
 let canvas = document.createElement("canvas"); 
 let ctx = canvas.getContext('2d'); 
 //瓦片canvas 
 let tCanvas = document.createElement("canvas"); 
 let tctx = tCanvas.getContext("2d"); 
 let initSize = img.src.length; 
 let width = img.width; 
 let height = img.height; 
 //如果图片大于四百万像素,计算压缩比并将大小压至400万以下 
 let ratio; 
 if ((ratio = width * height / 4000000) > 1) { 
 console.log("大于400万像素") 
 ratio = Math.sqrt(ratio); 
 width /= ratio; 
 height /= ratio; 
 } else { 
 ratio = 1; 
 } 
 canvas.width = width; 
 canvas.height = height; 
 // 铺底色 
 ctx.fillStyle = "#fff"; 
 ctx.fillRect(0, 0, canvas.width, canvas.height); 
 //如果图片像素大于100万则使用瓦片绘制 
 let count; 
 if ((count = width * height / 1000000) > 1) { 
 console.log("超过100W像素"); 
 count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片 
 //  计算每块瓦片的宽和高 
 let nw = ~~(width / count); 
 let nh = ~~(height / count); 
 tCanvas.width = nw; 
 tCanvas.height = nh; 
 for (let i = 0; i < count; i++) { 
  for (let j = 0; j < count; j++) { 
  tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); 
  ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); 
  } 
 } 
 } else { 
 ctx.drawImage(img, 0, 0, width, height); 
 } 
 //修复ios上传图片的时候 被旋转的问题 
 if(Orientation != "" && Orientation != 1){ 
 switch(Orientation){ 
  case 6://需要顺时针(向左)90度旋转 
  this.rotateImg(img,'left',canvas); 
  break; 
  case 8://需要逆时针(向右)90度旋转 
  this.rotateImg(img,'right',canvas); 
  break; 
  case 3://需要180度旋转 
  this.rotateImg(img,'right',canvas);//转两次 
  this.rotateImg(img,'right',canvas); 
  break; 
 } 
 } 
 //进行最小压缩 
 let ndata = canvas.toDataURL('image/jpeg', 0.1); 
 console.log('压缩前:' + initSize); 
 console.log('压缩后:' + ndata.length); 
 console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%"); 
 tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; 
 return ndata; 
 }, 
 } 
} 
</script> 
<style> 
*{ 
 margin: 0; 
 padding: 0; 
} 
.show { 
 width: 100px; 
 height: 100px; 
 overflow: hidden; 
 position: relative; 
 border-radius: 50%; 
 border: 1px solid #d5d5d5; 
} 
.picture { 
 width: 100%; 
 height: 100%; 
 overflow: hidden; 
 background-position: center center; 
 background-repeat: no-repeat; 
 background-size: cover; 
} 
</style>

以上所述是小编给大家介绍的vue2实现移动端上传、预览、压缩图片解决拍照旋转问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 Javascript
Vue组件tree实现树形菜单
Apr 13 #Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 #Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 #Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 #Javascript
JS传参及动态修改页面布局
Apr 13 #Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 #Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 #Javascript
You might like
定义php常量的详解
2013/06/09 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
BootStrap selectpicker
2016/06/20 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Python学习笔记之装饰器
2020/08/06 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
机械工程系毕业生求职信
2013/09/27 职场文书
个人公开承诺书
2014/03/28 职场文书
环保建议书200字
2014/05/14 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
部门活动策划方案
2014/08/16 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
校运会加油稿大全
2015/07/22 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫