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操纵Cookie实现购物车程序
Nov 23 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
vue element-ui读取pdf文件的方法
Nov 26 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脚本的10个技巧(6)
2006/10/09 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
python 全文检索引擎详解
2017/04/25 Python
Python实现随机选择元素功能
2017/09/14 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Python实现爬取并分析电商评论
2020/06/19 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
高中语文教学反思
2014/01/16 职场文书
关于人生的感言
2014/01/17 职场文书
创新比赛获奖感言
2014/02/13 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
班干部演讲稿
2014/04/24 职场文书
食品安全承诺书
2014/05/22 职场文书
安全横幅标语
2014/06/09 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS