直面痛点！解决 uni-app 上传图片显示方向错误的坑

前端

2023-11-08 23:27:06

在移动开发的浩瀚海洋中，uni-app 凭借其跨平台的便利性和强大的功能脱颖而出。然而，在使用 uni-app 时，不可避免会遇到各种坑。其中，图片上传后显示方向不对的问题让人挠头不已。

作为一名经验丰富的技术博客作者，我亲历了这块绊脚石。为了帮助广大开发者们规避这个坑，我决定将我的踩坑经验倾囊相授。

问题根源

究其原因，图片方向错误的根源在于 uni-app 在上传图片时丢失了图片的 exif 扩展信息。exif 扩展信息包含了图片的方向、拍摄时间等元数据，而这些信息对于图片的正确显示至关重要。

解决方案

解决这个问题，关键在于在上传图片时保留 exif 扩展信息。具体步骤如下：

使用 FileReader 读取图片文件：

const fileReader = new FileReader();
fileReader.onload = function () {
  const imageData = fileReader.result;
  // ... 后续处理
};
fileReader.readAsArrayBuffer(file);

使用 JavaScript Exif 库解析 exif 扩展信息：

import { EXIF } from "javascript-exif";

EXIF.getData(imageData, function () {
  const orientation = EXIF.getTag(this, "Orientation");
  // ... 根据方向调整图片
});

根据 exif 信息调整图片方向：

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

// 根据方向旋转图片
switch (orientation) {
  case 6:
    ctx.rotate(90 * Math.PI / 180);
    break;
  case 3:
    ctx.rotate(180 * Math.PI / 180);
    break;
  case 8:
    ctx.rotate(270 * Math.PI / 180);
    break;
}

// ... 调整后的后续处理