Học từ web lớn #5: Magic number, EXIF và dán ảnh khi upload (Ello)

/**
 * Nhận loại file thật bằng "magic number" (vài byte đầu file), không tin đuôi file hay `file.type`.
 * Ý tưởng từ `isValidFileType` của Ello (src/helpers/file_helper.js), viết lại so sánh theo byte.
 */

export type SniffedType = 'image/jpeg' | 'image/png' | 'image/gif' | 'image/webp' | 'image/bmp';

interface Signature {
  type: SniffedType;
  /** vị trí bắt đầu so khớp */
  offset: number;
  /** null = byte nào cũng được */
  bytes: Array<number | null>;
}

const ascii = (s: string) => Array.from(s, (c) => c.charCodeAt(0));

const SIGNATURES: Signature[] = [
  { type: 'image/jpeg', offset: 0, bytes: [0xff, 0xd8, 0xff] },
  { type: 'image/png', offset: 0, bytes: [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a] },
  { type: 'image/gif', offset: 0, bytes: ascii('GIF8') }, // GIF87a / GIF89a
  // RIFF....WEBP: 4 byte ở giữa là kích thước file, bỏ qua
  { type: 'image/webp', offset: 0, bytes: [...ascii('RIFF'), null, null, null, null, ...ascii('WEBP')] },
  { type: 'image/bmp', offset: 0, bytes: ascii('BM') },
];

/** Số byte đầu cần đọc để nhận đủ mọi chữ ký ở trên. */
export const SNIFF_LENGTH = 12;

export function sniffImageType(head: Uint8Array): SniffedType | null {
  for (const sig of SIGNATURES) {
    if (head.length < sig.offset + sig.bytes.length) continue;
    const match = sig.bytes.every((b, i) => b === null || head[sig.offset + i] === b);
    if (match) return sig.type;
  }
  return null;
}

/** Đọc vài byte đầu của một File/Blob mà không đọc cả file vào bộ nhớ. */
export async function readHead(blob: Blob, length = SNIFF_LENGTH): Promise<Uint8Array> {
  return new Uint8Array(await blob.slice(0, length).arrayBuffer());
}

export interface SniffResult {
  /** loại thật theo nội dung, null nếu không phải ảnh được hỗ trợ */
  type: SniffedType | null;
  /** loại trình duyệt đoán (từ đuôi file / hệ điều hành) */
  declaredType: string;
  /** đuôi file và nội dung không khớp: ảnh PNG đặt tên .jpg, file .exe đổi tên thành .png… */
  mismatch: boolean;
}

export async function sniffFile(file: File | Blob): Promise<SniffResult> {
  const type = sniffImageType(await readHead(file));
  const declaredType = file.type;
  // image/jpg không phải MIME chuẩn nhưng vẫn gặp ngoài đời: coi như image/jpeg
  const normalized = declaredType === 'image/jpg' ? 'image/jpeg' : declaredType;
  // lệch khi: nội dung là ảnh nhưng khai báo loại khác, hoặc khai báo là ảnh mà nội dung không phải
  const mismatch =
    normalized !== '' && normalized !== type && (type !== null || normalized.startsWith('image/'));
  return { type, declaredType, mismatch };
}

/**
 * Đọc EXIF Orientation (tag 0x0112) từ JPEG mà không cần thư viện.
 * Ello dùng `exif-js` để đọc toàn bộ EXIF; ở đây chỉ cần đúng một tag nên tự parse cho gọn.
 *
 * Cấu trúc: JPEG = chuỗi segment [0xFF, marker, độ dài 2 byte big-endian, dữ liệu].
 * EXIF nằm trong segment APP1 (0xFFE1), bắt đầu bằng "Exif\0\0", theo sau là một file TIFF thu nhỏ:
 * "II" (little-endian) hoặc "MM" (big-endian), số 42, offset tới IFD0, rồi danh sách tag 12 byte/tag.
 */

/** 1 = bình thường; 3 = xoay 180°; 6 = cần xoay 90° theo chiều kim đồng hồ; 8 = xoay 90° ngược chiều.
 *  2, 4, 5, 7 là các biến thể lật gương. */
export type Orientation = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;

export function readJpegOrientation(buffer: ArrayBuffer): Orientation | null {
  const view = new DataView(buffer);
  if (view.byteLength < 4 || view.getUint16(0) !== 0xffd8) return null; // không phải JPEG

  let offset = 2;
  while (offset + 4 <= view.byteLength) {
    if (view.getUint8(offset) !== 0xff) return null; // lệch khỏi ranh giới segment: file hỏng
    const marker = view.getUint8(offset + 1);
    // SOS (0xDA): bắt đầu dữ liệu ảnh nén, EXIF luôn nằm trước đó
    if (marker === 0xda) return null;
    const length = view.getUint16(offset + 2); // tính cả 2 byte độ dài, không tính 0xFF + marker
    if (marker === 0xe1) {
      const orientation = readExifSegment(view, offset + 4, length - 2);
      if (orientation !== undefined) return orientation;
    }
    offset += 2 + length;
  }
  return null;
}

function readExifSegment(view: DataView, start: number, length: number): Orientation | null | undefined {
  if (start + length > view.byteLength || length < 14) return undefined;
  // "Exif\0\0"; APP1 cũng có thể là XMP, khi đó bỏ qua và tìm segment tiếp theo
  if (view.getUint32(start) !== 0x45786966 || view.getUint16(start + 4) !== 0) return undefined;

  const tiff = start + 6;
  const byteOrder = view.getUint16(tiff);
  if (byteOrder !== 0x4949 && byteOrder !== 0x4d4d) return null;
  const little = byteOrder === 0x4949; // "II" = Intel = little-endian
  if (view.getUint16(tiff + 2, little) !== 42) return null;

  const ifd0 = tiff + view.getUint32(tiff + 4, little);
  if (ifd0 + 2 > start + length) return null;
  const count = view.getUint16(ifd0, little);
  for (let i = 0; i < count; i++) {
    const entry = ifd0 + 2 + i * 12;
    if (entry + 12 > start + length) return null;
    if (view.getUint16(entry, little) === 0x0112) {
      // kiểu SHORT (3), giá trị nằm luôn trong 2 byte đầu của ô value
      const value = view.getUint16(entry + 8, little);
      return value >= 1 && value <= 8 ? (value as Orientation) : null;
    }
  }
  return null;
}

/** Orientation đổi chỗ chiều rộng và chiều cao (xoay 90°)? */
export const swapsDimensions = (o: Orientation | null) => o !== null && o >= 5;

/** CSS transform tương ứng, để xoay thủ công khi trình duyệt KHÔNG tự xoay (trình duyệt cũ). */
export function orientationTransform(o: Orientation | null): string {
  switch (o) {
    case 2: return 'scaleX(-1)';
    case 3: return 'rotate(180deg)';
    case 4: return 'scaleY(-1)';
    case 5: return 'rotate(-90deg) scaleX(-1)'; // chuyển vị (transpose)
    case 6: return 'rotate(90deg)';
    case 7: return 'rotate(90deg) scaleX(-1)';
    case 8: return 'rotate(-90deg)';
    default: return 'none';
  }
}

/** EXIF nằm ở đầu file (APP1 tối đa 64KB), nên chỉ cần đọc 128KB đầu thay vì cả ảnh 10MB. */
export async function readOrientation(file: Blob): Promise<Orientation | null> {
  return readJpegOrientation(await file.slice(0, 128 * 1024).arrayBuffer());
}

/**
 * Lấy ảnh từ sự kiện paste trên mọi trình duyệt.
 * Ý tưởng từ PasteHandler của Ello (src/components/editor/PasteHandler.js), có 3 nhánh:
 *  1. clipboardData có item kiểu image/* → lấy File bằng getAsFile() (Chrome, Edge, Firefox, Safari mới)
 *  2. text là data URL "…;base64,…" → tự chuyển thành Blob
 *  3. không có gì → để trình duyệt chèn <img> vào vùng soạn thảo rồi đọc lại src
 *     (Firefox đời cũ dán ảnh dưới dạng <img src="data:…">; Safari cũ dùng "webkit-fake-url://")
 * Bản viết lại xử lý nhánh 3 bằng cách đọc text/html của clipboard thay vì đợi DOM thay đổi.
 */

export type PasteResult =
  | { kind: 'files'; files: File[] }
  | { kind: 'image-url'; url: string } // ảnh copy từ trang web khác: chỉ có URL
  | { kind: 'text'; text: string }
  | { kind: 'unsupported'; reason: string };

export function dataUrlToBlob(dataUrl: string): Blob | null {
  const match = /^data:([^;,]+)?(;base64)?,(.*)$/s.exec(dataUrl.trim());
  if (!match) return null;
  const [, mime = 'application/octet-stream', isBase64, data] = match;
  if (!isBase64) return new Blob([decodeURIComponent(data)], { type: mime });
  const binary = atob(data);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
  return new Blob([bytes], { type: mime });
}

export function readPaste(data: DataTransfer): PasteResult {
  // 1. File thật. `data.files` có ở mọi trình duyệt hiện đại; items là đường dự phòng.
  const files = Array.from(data.files).filter((f) => f.type.startsWith('image/'));
  if (files.length === 0) {
    for (const item of Array.from(data.items ?? [])) {
      if (item.kind === 'file' && item.type.startsWith('image/')) {
        const file = item.getAsFile();
        if (file) files.push(file);
      }
    }
  }
  if (files.length > 0) return { kind: 'files', files };

  // 2. Text là data URL
  const text = data.getData('text/plain');
  if (/^data:image\/[\w.+-]+;base64,/.test(text.trim())) {
    const blob = dataUrlToBlob(text);
    if (blob) return { kind: 'files', files: [new File([blob], 'pasted', { type: blob.type })] };
  }

  // 3. HTML có <img>: copy ảnh từ trang web (chuột phải → Copy image ở một số trình duyệt)
  const html = data.getData('text/html');
  if (html) {
    const img = new DOMParser().parseFromString(html, 'text/html').querySelector('img');
    const src = img?.getAttribute('src') ?? '';
    if (src.startsWith('data:image/')) {
      const blob = dataUrlToBlob(src);
      if (blob) return { kind: 'files', files: [new File([blob], 'pasted', { type: blob.type })] };
    }
    if (src.startsWith('webkit-fake-url:')) {
      // Safari cũ: không đọc được dữ liệu ảnh (Ello hiện thông báo xin lỗi)
      return { kind: 'unsupported', reason: 'Trình duyệt không cho đọc ảnh vừa dán' };
    }
    if (/^https?:/.test(src) && !text) return { kind: 'image-url', url: src };
  }

  if (text) return { kind: 'text', text };
  return { kind: 'unsupported', reason: 'Clipboard không có ảnh hay chữ' };
}