vue使用exif获取图片旋转,压缩的示例代码


Posted in Vue.js onDecember 11, 2020
<template>
 <div>
  <input type="file" id="upload" accept="image" @change="upload" />
 </div>
</template>
<script>
export default {
 data() {
  return {
   picValue:{},
   headerImage:''
  };
 },
 components: {},
 methods: {
  upload(e) {
   console.log(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;
   //去获取拍照时的信息,解决拍出来的照片旋转问题
   self.Exif.getData(file, function() {
    Orientation = self.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 = 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();
      };
     }
    };
   }
  },
  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);
   tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
   return ndata;
  },
  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;
   }
  },
  postImg() {
   //这里写接口

//打印的图片base64

   console.log('this.headerImage',this.headerImage);
   //接口 axios
  }
 }
};
</script>

要先运行

npm install exif-js --save

然后在main.js中添加

import Exif from 'exif-js'
Vue.use(Exif)
Vue.prototype.Exif = Exif

以上就是vue使用exif获取图片旋转,压缩的示例代码的详细内容,更多关于vue 图片旋转,压缩的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 #Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 #Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 #Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 #Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 #Vue.js
vue中如何自定义右键菜单详解
Dec 08 #Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 #Vue.js
You might like
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php实现图片缩略图的方法
2016/03/29 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
Bootstrap Table使用整理(三)
2017/06/09 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
微信小程序实现签到弹窗动画
2020/09/21 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python获取远程图片大小和尺寸的方法
2015/03/26 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Python 使用type来定义类的实现
2019/11/19 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Python os库常用操作代码汇总
2020/11/03 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
2015年基建工作总结范文
2015/05/23 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
css height属性中的calc方法详解
2021/06/03 HTML / CSS