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 相关文章推荐
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
js html实现计算器功能
Nov 13 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
js原生map实现的方法总结
Jan 19 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP异常处理Exception类
2015/12/11 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
python查看模块安装位置的方法
2018/10/16 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
pytest中文文档之编写断言
2019/09/12 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
综合办公室主任职责
2013/12/16 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
职务聘任书范文
2014/03/29 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
导游带团欢迎词
2015/09/30 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技