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插件 autoComboBox 下拉框
Dec 22 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
php 分库分表hash算法
2009/11/12 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
Python如何判断数独是否合法
2016/09/08 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
python 实现倒排索引的方法
2018/12/25 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
法律工作求职自荐信
2013/10/31 职场文书
党的生日演讲稿
2014/09/10 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server