JS解决IOS中拍照图片预览旋转90度BUG的问题


Posted in Javascript onSeptember 13, 2017

上篇文章【Js利用Canvas实现图片压缩功能】中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度。对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编程了。通过度娘找到了相关资料,解决方法记录在此。这个问题的具体因素其实我还是不清楚是为何导致的,只有IOS和部分三星手机会出现此bug。 绝大部分的安卓机并无此问题。

解决此问题需要引入一个第三方 JS 库: exif.js 下载地址:https://github.com/exif-js/exif-js 通过exif.js 我们可以获取到图片的元信息,这其中就包括照片的拍照方向。

而 exif.js 给出的照片方向属性如下图:

JS解决IOS中拍照图片预览旋转90度BUG的问题

IOS中通过 exif.js ,获取拍照的图片的方向,返回的值为 6, 也就是上图最左边的 F 的情况。 这也正是我们的bug所在。 因此我们通过判断方向的值来做相应的处理,如果值为 6 ,则我们对图片进行旋转矫正。

具体代码如下:

//获取图片方向
function getPhotoOrientation(img) {
   var orient;
   EXIF.getData(img, function () {
      orient = EXIF.getTag(this, 'Orientation');
   });
   return orient;
}

接下来我们将上篇文章中的压缩函数修改如下:

//图片压缩
function compress(img, width, height, ratio) {
   var canvas, ctx, img64, orient;
  
   //获取图片方向
   orient = getPhotoOrientation(img);

   canvas = document.createElement('canvas');
   canvas.width = width;
   canvas.height = height;

   ctx = canvas.getContext("2d");

   //如果图片方向等于6 ,则旋转矫正,反之则不做处理
   if (orient == 6) {
      ctx.save();
      ctx.translate(width / 2, height / 2);
      ctx.rotate(90 * Math.PI / 180);
      ctx.drawImage(img, 0 - height / 2, 0 - width / 2, height, width);
      ctx.restore();
   } else {
      ctx.drawImage(img, 0, 0, width, height);
   }

   img64 = canvas.toDataURL("image/jpeg", ratio);
   return img64;
}

OK, 问题解决!

以上这篇JS解决IOS中拍照图片预览旋转90度BUG的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 面向对象编程(1) 基础
May 18 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
javascript this指向相关问题及改变方法
Nov 19 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 #Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 #Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 #Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 #Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 #Javascript
js数组实现权重概率分配
Sep 12 #Javascript
js 概率计算(简单版)
Sep 12 #Javascript
You might like
php使用百度翻译api示例分享
2014/01/31 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
万能的php分页类
2017/07/06 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
javascript里的条件判断
2007/02/27 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
js DOM的学习笔记
2011/12/22 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
python调用java的Webservice示例
2014/03/10 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python中使用print输出中文的方法
2018/07/16 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
百度JavaScript笔试题
2015/01/15 面试题
Hibernate持久层技术
2013/12/16 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
初中生三年学习生活的自我评价
2013/11/03 职场文书
考试不及格的检讨书
2014/01/22 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
解约证明模板
2015/06/19 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
mysql创建存储过程及函数详解
2021/12/04 MySQL
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers