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插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
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 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
python实现视频压缩功能
2020/12/18 Python
医务人员自我评价
2014/01/26 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
经理助理岗位职责
2014/03/05 职场文书
入党个人总结范文
2015/03/02 职场文书
2015年保送生自荐信
2015/03/24 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
解决Redis启动警告问题
2022/02/24 Redis