查看: 1849|回复: 0

[DIV/CSS] JS 解决 IOS 中拍照图片预览旋转 90度 BUG

发表于 2017-9-24 08:00:05
句号论坛

上篇博文【 Js利用Canvas实现图片压缩 】中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度。对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编程了。通过度娘找到了相关资料,解决方法记录在此。这个问题的具体因素其实我还是不清楚是为何导致的,只有IOS和部分三星手机会出现此bug。 绝大部分的安卓机并无此问题。

解决此问题需要引入一个第三方 JS 库: exif.js 下载地址:https://github.com/exif-js/exif-js 通过exif.js 我们可以获取到图片的元信息,这其中就包括照片的拍照方向。而 exif.js 给出的照片方向属性如下图:

IOS中通过 exif.js ,获取拍照的图片的方向,返回的值为 6, 也就是上图最左边的 F 的情况。 这也正是我们的bug所在。 因此我们通过判断方向的值来做相应的处理,如果值为 6 ,则我们对图片进行旋转矫正。具体代码如下:

  1. //获取图片方向
  2. function getPhotoOrientation(img) {
  3. var orient;
  4. EXIF.getData(img, function () {
  5. orient = EXIF.getTag(this, 'Orientation');
  6. });
  7. return orient;
  8. }
复制代码

接下来我们将上篇文章中的压缩函数修改如下:

  1. //图片压缩
  2. function compress(img, width, height, ratio) {
  3. var canvas, ctx, img64, orient;
  4.     <br> //获取图片方向
  5. orient = getPhotoOrientation(img);
  6. canvas = document.createElement('canvas');
  7. canvas.width = width;
  8. canvas.height = height;
  9. ctx = canvas.getContext("2d");
  10. <br> //如果图片方向等于6 ,则旋转矫正,反之则不做处理
  11. if (orient == 6) {
  12. ctx.save();
  13. ctx.translate(width / 2, height / 2);
  14. ctx.rotate(90 * Math.PI / 180);
  15. ctx.drawImage(img, 0 - height / 2, 0 - width / 2, height, width);
  16. ctx.restore();
  17. } else {
  18. ctx.drawImage(img, 0, 0, width, height);
  19. }
  20. img64 = canvas.toDataURL("image/jpeg", ratio);
  21. return img64;
  22. }
复制代码

OK, 问题解决!参考资料:http://blog.csdn.net/hsany330/article/details/52471522



太阳http代理AD
回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条