关于HTML5显示图片翻转90度的问题

首先，看到标题就觉得这个问题有点看不懂吧。咱遇到问题，那就解决问题。下面就具体描述一下遇到的情况。

上传作品后，需要作品的详情展示，然后在预览页面，出现某些图片与上传的图片展示不一致的效果。下面是原图与展示图的对比。

很明显可以图片发生了一个-90度的旋转。这是由于什么原因造成的呢？

首先，我查了一些资料，得知由于图片元数据造成的兼容性问题。 ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题 造成该问题的属性就是

Orientation 拍摄方向

在网上找到一个比较好用的插件来获取元数据的属性。

Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。
⚠️注意事项： EXIF 数据主要来自拍摄的照片，多用于移动端开发，PC 端也会用到，此插件兼容主流浏览器，IE10 以下不支持。

该属性的值一般有哪些呢？

找到原因后，就开始解决问题了。

// main.js   npm install exif-js
import EXIF from 'exif-js';
Vue.prototype.EXIF = EXIF;

// <Vue script code>
imgOnload(path, e) {  // 在图片标签上加一个load 事件
    const img = e.currentTarget;
    const _this = this;
    const imageObj = new Image();
    imageObj.src = path; // path代表文件的路径
    EXIF.getData(imageObj, function(){
      EXIF.getAllTags(this); // 获取所有属性
      const Orientation = EXIF.getTag(this, 'Orientation'); // 获取该Orientation属性
      if (Orientation == 6) { // 旋转90
        // 其中img是代表当前图片展示的img标签，我是直接让他的父元素进行的旋转加平移，并且设置了高度。
        img.parentNode.style = `transform: rotate(90deg) translateY(${Math.abs(img.width - img.height) / 2}px); height: 860px`;
      } else if (Orientation == 8) { // 旋转-90
        img.parentNode.style = `transform: rotate(-90deg) translateY(${Math.abs(img.width - img.height) / 2}px); height: 860px`;
      }
      ...
    });
}

由此，旋转的图片得以正常的加载。

引用的插件api：code.ciaoca.com/javascript/…
获取图片元数据的demo示例：code.ciaoca.com/javascript/…