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中的Screen屏幕对象
Jan 16 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
护理专业优质毕业生自荐书
2014/01/31 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
营运督导岗位职责
2015/04/10 职场文书
亲戚关系证明
2015/06/24 职场文书
公司处罚决定书
2015/06/24 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis