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 相关文章推荐
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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 调试工具Debug Tools
2011/04/30 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python全栈知识点总结
2019/07/01 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python turtle 绘制太极图的实例
2019/12/18 Python
python代码xml转txt实例
2020/03/10 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
甜点店创业计划书
2014/01/27 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
国旗下的演讲稿
2014/05/08 职场文书
公司委托书格式范本
2014/09/16 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
新闻通讯稿模板
2015/07/22 职场文书
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android