Angular客户端：如何从HTML输入旋转JPEG并保存为Base64字符串

我来帮你搞定这个需求——从HTML图片输入获取文件，读取EXIF方向信息，然后在客户端完成图片旋转，最后输出正确的Base64字符串。下面是一步步的实现方案：

1. 准备依赖：读取EXIF数据 #

原生JS处理EXIF有点繁琐，我们可以用成熟的exif-js库来简化操作。先安装它：

npm install exif-js --save

2. 核心实现步骤 #

第一步：HTML文件输入组件 #

先在模板里添加图片输入字段和预览区域：

<input type="file" accept="image/*" (change)="handleImageUpload($event)">
<img *ngIf="rotatedImageUrl" [src]="rotatedImageUrl" alt="旋转后的图片" style="max-width: 100%;">

第二步：组件逻辑处理 #

在你的Angular组件TS文件里，实现文件读取、EXIF解析和图片旋转的完整逻辑：

import { Component } from '@angular/core';
import * as EXIF from 'exif-js';

@Component({
  selector: 'app-image-rotator',
  templateUrl: './image-rotator.component.html',
  styleUrls: ['./image-rotator.component.css']
})
export class ImageRotatorComponent {
  rotatedImageUrl: string | null = null;

  handleImageUpload(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (!input.files || input.files.length === 0) return;

    const file = input.files[0];
    const img = new Image();
    const reader = new FileReader();

    reader.onload = (e) => {
      img.src = e.target?.result as string;
      // 图片加载完成后再处理EXIF和旋转
      img.onload = () => {
        EXIF.getData(img, () => {
          const orientation = EXIF.getTag(img, 'Orientation');
          this.rotateImage(img, orientation).then(rotatedUrl => {
            this.rotatedImageUrl = rotatedUrl;
            // 这里可以直接把rotatedUrl保存为Base64，或者转成Blob用于后端上传
          });
        });
      };
    };

    reader.readAsDataURL(file);
  }

  private async rotateImage(img: HTMLImageElement, orientation: number): Promise<string> {
    return new Promise((resolve) => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      if (!ctx) return resolve(img.src);

      // 根据EXIF Orientation值处理不同的旋转/翻转场景
      switch (orientation) {
        case 2: // 水平翻转
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.translate(img.width, 0);
          ctx.scale(-1, 1);
          ctx.drawImage(img, 0, 0);
          break;
        case 3: // 180度旋转
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.translate(img.width, img.height);
          ctx.rotate(Math.PI);
          ctx.drawImage(img, 0, 0);
          break;
        case 4: // 垂直翻转
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.translate(0, img.height);
          ctx.scale(1, -1);
          ctx.drawImage(img, 0, 0);
          break;
        case 6: // 顺时针90度（手机拍照最常见的旋转情况）
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(0.5 * Math.PI);
          ctx.drawImage(img, 0, -img.width);
          break;
        case 8: // 逆时针90度
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(-0.5 * Math.PI);
          ctx.drawImage(img, -img.height, 0);
          break;
        case 5: // 水平翻转+顺时针90度
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(0.5 * Math.PI);
          ctx.scale(1, -1);
          ctx.drawImage(img, 0, -img.height);
          break;
        case 7: // 水平翻转+逆时针90度
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(0.5 * Math.PI);
          ctx.scale(-1, 1);
          ctx.drawImage(img, -img.height, -img.width);
          break;
        default: // 正常方向（Orientation=1）
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0);
          break;
      }

      // 将旋转后的Canvas转为Base64字符串（支持自定义图片质量）
      resolve(canvas.toDataURL('image/jpeg', 0.95));
    });
  }
}

3. 关键细节说明 #

• EXIF Orientation值：不同数值对应不同的旋转/翻转状态，上面的switch已经覆盖了所有8种可能，其中6、8、3是手机拍照后最常见的旋转场景。
• Canvas尺寸适配：当旋转90/270度时，图片宽高会互换，必须同步调整画布尺寸，否则会出现图片裁剪问题。
• 图片质量控制：canvas.toDataURL的第二个参数可以控制输出Base64的图片质量（0-1之间），你可以根据需求调整。
• 跨域注意：如果图片来自外部域名，需要确保服务器允许跨域访问，否则EXIF.getData可能无法读取到方向信息。

这样处理后，你就能得到完全符合视觉预期的旋转后图片Base64字符串了~

内容的提问来源于stack exchange，提问作者Jay Jay