数码照片Exif - Orientation 自动修正解决方案

cnsworder 发布于2019-08-26 11:59 / 3289人阅读

摘要：使用自动修正数码照片使用场景，在做朋友圈时，时常遇到需要用户拍照上传图片需求，但是在一些手机上拍出来的照片会出现奇怪的旋转角度来呈现。

使用Canvas + exif-js自动修正数码照片

使用场景，在做朋友圈 H5 时，时常遇到需要用户拍照上传图片需求，但是在一些手机（iso）上拍出来的照片会出现奇怪的旋转角度来呈现。经过各种百度才发现相机拍出来的图片拥有很多属性，其中一项是Orientation ，用于记录拍摄时相机物理旋转角度，例如把相机倒过来Orientation 是3，顺时针竖起来Orientation 是6，逆时针竖起来Orientation 是8，正常模式Orientation 是1。根据这个属性我们可以使用Canvas来对图片重绘。

Orientation 示意图

Show Code

import EXIF from "exif-js"; // 引入依赖插件

// 参数列表：img 对象，callback返回Base64图片编码，生成图片质量默认值0.9
export const FixImg = (img, callback, quality = 0.9) => {
    
  let Orientation, ctxWidth, ctxHeight, base64; // 定义所需变量

  EXIF.getData(img, function() {
    Orientation = EXIF.getTag(this, "Orientation");
    ctxWidth = this.naturalWidth;
    ctxHeight = this.naturalHeight;
    
    console.log(Orientation, ctxWidth, ctxHeight);

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");

    canvas.width = ctxWidth;
    canvas.height = ctxHeight;
    if ([5, 6, 7, 8].includes(Orientation)) {
      canvas.width = ctxHeight;
      canvas.height = ctxWidth;
    }

    switch (Orientation) {
      case 2:
        ctx.transform(-1, 0, 0, 1, ctxWidth, 0);
        break;
      case 3:
        ctx.transform(-1, 0, 0, -1, ctxWidth, ctxHeight);
        break;
      case 4:
        ctx.transform(1, 0, 0, -1, 0, ctxHeight);
        break;
      case 5:
        ctx.transform(0, 1, 1, 0, 0, 0);
        break;
      case 6:
        ctx.transform(0, 1, -1, 0, ctxHeight, 0);
        break;
      case 7:
        ctx.transform(0, -1, -1, 0, ctxHeight, ctxWidth);
        break;
      case 8:
        ctx.transform(0, -1, 1, 0, 0, ctxWidth);
        break;
      default:
        ctx.transform(1, 0, 0, 1, 0, 0);
    }

    ctx.drawImage(img, 0, 0, ctxWidth, ctxHeight);
    
    // 默认输出jpeg,也可以读取原图片格式，最后输出原图格式，搜索关键词 ：File.type
    base64 = canvas.toDataURL("image/jpeg", quality); 
    callback(base64);
  });
};

性感照骗，在线修复： http://peichenhu.cn/demo/awesome/#/Exif

相关补充：从图片 Exif 信息中取到 Orientation 后，就可以根据它来自动旋转图片了，canvas、filter 滤镜、vml、css3 都可以实现图片的旋转。
参考文章：https://imququ.com/post/how-t...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107965.html

web端上传图片时图片被旋转问题

摘要：有些时候在端上传图片会遇到这种情况，正向的图片，上传预览时就被旋转了。在使用或者其他软件旋转图片时，图片旋转了，但不会改变，由于我们使用的图片预览器能够预处理图片，使其看起来与旋转后一致，但上传图片时，浏览器并不会预处理。有些时候在web端上传图片会遇到这种情况，正向的图片，上传预览时就被旋转了。 showImg(https://segmentfault.com/img/bVbhxd...

CastlePeaK 2019-08-23 12:09 评论0 收藏0
解决移动端iOS下上传图片被旋转问题。

摘要：下上传图片被旋转解决方法用既然是解决问题，那就简单说一下，直接上代码方式使用在上可以直接调用照相机拍照，竖拍出来的图片都会变成横图思路获取到照片拍摄的方向角，对非横拍的照片使用的进行角度旋转修正。 iOS下html上传图片被旋转解决方法用exif.js+canvas既然是解决问题，那就简单说一下，直接上代码！ html方式使用在iOS上可以直接调用照相机拍照，竖拍出来的图片都会变成横...

zhunjiee 2019-08-21 17:08 评论0 收藏0
移动端图片上传旋转、压缩的解决方案

摘要：上传的文件经过就可以实现预览图片了，这方面不清楚的可以查看进阶系列文件上传下载旋转旋转需要用到的方法。前言在手机上通过网页 input 标签拍照上传图片，有一些手机会出现图片旋转了90度d的问题，包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题，横拍出来的照片就正常显示。因此，可以通过获取手机拍照角度来对照片进行旋转，从而解决这个问题。 Orientatio...

blair 2019-08-20 17:38 评论0 收藏0