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回车实现登录简单实现
Aug 20 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 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数字游戏 计算24算法
2012/06/10 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
php微信开发之关注事件
2018/06/14 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python实战之制作天气查询软件
2019/05/14 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
2015年学生会个人工作总结
2015/04/09 职场文书
地道战观后感
2015/06/04 职场文书
运动会通讯稿600字
2015/07/20 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis