Reactで、画像を回転・反転して保存する方法

export type Rotation = 0 | 90 | 180 | 270;

// 画像の向き。「flip が true なら元の画像を左右反転し、そのあと rotation 度だけ時計回りに回す」と読む
export type Orientation = { rotation: Rotation; flip: boolean };

export const initialOrientation: Orientation = { rotation: 0, flip: false };

const normalize = (deg: number) => (((deg % 360) + 360) % 360) as Rotation;

export const rotateRight = (o: Orientation): Orientation => ({ ...o, rotation: normalize(o.rotation + 90) });
export const rotateLeft = (o: Orientation): Orientation => ({ ...o, rotation: normalize(o.rotation - 90) });

// いま画面に見えている向きのまま、左右を入れ替える
export const flipHorizontal = (o: Orientation): Orientation => ({ rotation: normalize(-o.rotation), flip: !o.flip });
// いま画面に見えている向きのまま、上下を入れ替える
export const flipVertical = (o: Orientation): Orientation => ({ rotation: normalize(180 - o.rotation), flip: !o.flip });

// 向きを変えた画像を canvas に描く。90° と 270° のときは、canvas の幅と高さを入れ替える
export function drawOriented(canvas: HTMLCanvasElement, image: ImageBitmap, { rotation, flip }: Orientation) {
  const w = image.width;
  const h = image.height;
  const sideways = rotation === 90 || rotation === 270;
  canvas.width = sideways ? h : w;
  canvas.height = sideways ? w : h;

  const ctx = canvas.getContext('2d');
  if (!ctx) throw new Error('canvas が使えません');
  // 回したあとの画像が canvas の左上 (0, 0) からぴったり収まるように、先に原点を動かしておく
  if (rotation === 90) ctx.translate(h, 0);
  if (rotation === 180) ctx.translate(w, h);
  if (rotation === 270) ctx.translate(0, w);
  ctx.rotate((rotation * Math.PI) / 180);
  if (flip) {
    ctx.translate(w, 0);
    ctx.scale(-1, 1);
  }
  ctx.drawImage(image, 0, 0);
}

export function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality?: number): Promise<Blob> {
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('画像を書き出せませんでした'))), type, quality);
  });
}

// Blob をファイルとしてダウンロードさせる
export function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

import { useEffect, useRef, useState } from 'react';
import type { ChangeEvent } from 'react';
import {
  drawOriented, flipHorizontal, flipVertical, initialOrientation, rotateLeft, rotateRight,
} from './orientation';
import type { Orientation } from './orientation';
import { canvasToBlob, downloadBlob } from './save';

type Loaded = { bitmap: ImageBitmap; name: string; type: string };

export function App() {
  const [image, setImage] = useState<Loaded | null>(null);
  const [orientation, setOrientation] = useState<Orientation>(initialOrientation);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  // 向きが変わるたびに、プレビューの canvas を描き直す
  useEffect(() => {
    if (image && canvasRef.current) drawOriented(canvasRef.current, image.bitmap, orientation);
  }, [image, orientation]);

  async function handleFile(e: ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    const bitmap = await createImageBitmap(file);
    image?.bitmap.close();
    setOrientation(initialOrientation);
    setImage({ bitmap, name: file.name, type: file.type });
  }

  async function handleSave() {
    const canvas = canvasRef.current;
    if (!image || !canvas) return;
    // JPEG は JPEG のまま、それ以外は PNG で保存する
    const type = image.type === 'image/jpeg' ? 'image/jpeg' : 'image/png';
    const blob = await canvasToBlob(canvas, type, 0.92);
    const base = image.name.replace(/\.[^.]+$/, '');
    downloadBlob(blob, `${base}-edited.${type === 'image/jpeg' ? 'jpg' : 'png'}`);
  }

  const sideways = orientation.rotation % 180 !== 0;

  return (
    <main>
      <input type="file" accept="image/*" aria-label="画像を選ぶ" onChange={handleFile} />
      {image && (
        <>
          <div className="toolbar">
            <button type="button" onClick={() => setOrientation(rotateLeft)}>左に回す</button>
            <button type="button" onClick={() => setOrientation(rotateRight)}>右に回す</button>
            <button type="button" onClick={() => setOrientation(flipHorizontal)}>左右反転</button>
            <button type="button" onClick={() => setOrientation(flipVertical)}>上下反転</button>
            <button type="button" onClick={() => setOrientation(initialOrientation)}>元に戻す</button>
          </div>
          <canvas ref={canvasRef} className="preview" role="img" aria-label="向きを変えた画像のプレビュー" />
          <p className="info">
            回転：{orientation.rotation}° ／ 反転：{orientation.flip ? 'あり' : 'なし'} ／ 保存する大きさ：
            {sideways ? image.bitmap.height : image.bitmap.width}×{sideways ? image.bitmap.width : image.bitmap.height}px
          </p>
          <button type="button" className="save" onClick={handleSave}>保存する</button>
        </>
      )}
    </main>
  );
}

.preview { display: block; max-width: 100%; max-height: 360px; height: auto; width: auto; border: 1px solid #ccd; }

右に回す: PNG 401x601 RGBA | 色が違う画素 0 / 241001
左に回す: PNG 401x601 RGBA | 色が違う画素 0 / 241001
上下反転: PNG 601x401 RGBA | 色が違う画素 0 / 241001
右に回す → 左右反転: PNG 401x601 RGBA | 色が違う画素 0 / 241001
右に回す → 上下反転: PNG 401x601 RGBA | 色が違う画素 0 / 241001
左右反転 → 右に回す: PNG 401x601 RGBA | 色が違う画素 0 / 241001
右に回す → 左右反転 → 左に回す → 上下反転: PNG 601x401 RGBA | 色が違う画素 0 / 241001

ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate((rotation * Math.PI) / 180);
ctx.scale(flipX ? -1 : 1, flipY ? -1 : 1);
ctx.drawImage(image, -w / 2, -h / 2);

右に回す → 左右反転: 期待（右に回す → 左右反転）と比べて 色が違う画素 126478 / 241001 | 右に回す → 上下反転 と比べて 色が違う画素 0 / 241001

枠(.box): top 0, 幅 304, 高さ 204.15625
img の見た目: top -47.921875, 幅 200.15625, 高さ 300
次の段落: top 220.15625, 幅 560, 高さ 21

保存した画像: JPEG 401x601 EXIF の Orientation = None
元の JPEG を Pillow で右に回した画像と比べて: 色が違う画素 77735 / 241001、差のいちばん大きい画素で 57（0〜255）

何も押さない: 回転：0° ／ 反転：なし ／ 保存する大きさ：601×401px | 保存したファイル名: exif6-edited.jpg
右に回す: 回転：90° ／ 反転：なし ／ 保存する大きさ：401×601px | 保存したファイル名: exif6-edited.jpg