@hidemikimura/receipt-html-to-pdf 0.1.0

package/src/walker/image.js

@@ -0,0 +1,264 @@
+// @ts-check
+/**
+ * 画像の読み込みとデコード。
+ * - JPEG は元バイト列をそのまま DCTDecode で埋め込む（再圧縮しない）
+ * - それ以外（PNG, GIF, WebP, SVG …）は <canvas> でデコードして RGB + アルファに分離する
+ * 同じ URL は 1 回だけデコードし、PDF 上でも 1 つの XObject を共有する。
+ */
+
+/**
+ * @typedef {object} DecodedImage
+ * @property {string} key       重複排除キー（URL）
+ * @property {number} width     ピクセル
+ * @property {number} height
+ * @property {Uint8Array|null} jpeg   JPEG の生バイト列（DCTDecode）
+ * @property {Uint8Array|null} rgb    幅×高さ×3
+ * @property {Uint8Array|null} alpha  幅×高さ（完全不透明なら null）
+ */
+
+/** @type {Map<string, Promise<DecodedImage|null>>} */
+const cache = new Map();
+
+/**
+ * @param {string} url  絶対 URL（img.currentSrc または background-image の url()）
+ * @param {(w: import('../index.js').ConversionWarning) => void} warn
+ * @param {Element} [element]
+ * @returns {Promise<DecodedImage|null>}
+ */
+export function loadImage(url, warn, element) {
+  let p = cache.get(url);
+  if (!p) {
+    p = decode(url, warn, element).catch((e) => {
+      warn({ code: 'image-failed', message: `Failed to load image ${url}: ${e instanceof Error ? e.message : String(e)}`, element });
+      return null;
+    });
+    cache.set(url, p);
+  }
+  return p;
+}
+
+/**
+ * @param {string} url
+ * @param {(w: import('../index.js').ConversionWarning) => void} warn
+ * @param {Element} [element]
+ * @returns {Promise<DecodedImage|null>}
+ */
+async function decode(url, warn, element) {
+  // 1. バイト列を取得できれば JPEG 判定
+  /** @type {Uint8Array|null} */
+  let bytes = null;
+  try {
+    const res = await fetch(url, { mode: 'cors', credentials: 'same-origin' });
+    if (res.ok) bytes = new Uint8Array(await res.arrayBuffer());
+  } catch {
+    bytes = null; // CORS 等で読めない場合は canvas 経由にフォールバック
+  }
+
+  if (bytes && bytes[0] === 0xff && bytes[1] === 0xd8) {
+    const dims = jpegDimensions(bytes);
+    if (dims && dims.components === 3) {
+      return { key: url, width: dims.width, height: dims.height, jpeg: bytes, rgb: null, alpha: null };
+    }
+    // CMYK / グレースケール JPEG は canvas 経由で RGB 化する
+  }
+
+  // 2. canvas でデコード
+  const img = new Image();
+  img.crossOrigin = 'anonymous';
+  img.decoding = 'sync';
+  const loaded = new Promise((resolve, reject) => {
+    img.onload = () => resolve(undefined);
+    img.onerror = () => reject(new Error('image failed to load'));
+  });
+  if (bytes) {
+    const blobUrl = URL.createObjectURL(new Blob([/** @type {Uint8Array<ArrayBuffer>} */ (bytes)]));
+    img.src = blobUrl;
+    try {
+      await loaded;
+    } finally {
+      URL.revokeObjectURL(blobUrl);
+    }
+  } else {
+    img.src = url;
+    await loaded;
+  }
+  const w = img.naturalWidth;
+  const h = img.naturalHeight;
+  if (!w || !h) throw new Error('image has no intrinsic size');
+
+  const canvas = document.createElement('canvas');
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  if (!ctx) throw new Error('2D canvas unavailable');
+  ctx.drawImage(img, 0, 0);
+  /** @type {ImageData} */
+  let data;
+  try {
+    data = ctx.getImageData(0, 0, w, h);
+  } catch {
+    warn({
+      code: 'image-failed',
+      message: `Image ${url} is cross-origin without CORS headers; add crossorigin="anonymous" and Access-Control-Allow-Origin. Skipped.`,
+      element,
+    });
+    return null;
+  }
+  const px = data.data;
+  const rgb = new Uint8Array(w * h * 3);
+  const alpha = new Uint8Array(w * h);
+  let opaque = true;
+  for (let i = 0, j = 0, k = 0; i < px.length; i += 4, j += 3, k++) {
+    const a = /** @type {number} */ (px[i + 3]);
+    // getImageData は非プリマルチプライ。透明ピクセルの色はノイズになりうるので白に寄せる
+    if (a === 0) {
+      rgb[j] = rgb[j + 1] = rgb[j + 2] = 255;
+    } else {
+      rgb[j] = /** @type {number} */ (px[i]);
+      rgb[j + 1] = /** @type {number} */ (px[i + 1]);
+      rgb[j + 2] = /** @type {number} */ (px[i + 2]);
+    }
+    alpha[k] = a;
+    if (a !== 255) opaque = false;
+  }
+  return { key: url, width: w, height: h, jpeg: null, rgb, alpha: opaque ? null : alpha };
+}
+
+/**
+ * JPEG の SOF マーカーから寸法と成分数を読む。
+ * @param {Uint8Array} b
+ * @returns {{width: number, height: number, components: number}|null}
+ */
+export function jpegDimensions(b) {
+  let p = 2;
+  while (p + 9 < b.length) {
+    if (b[p] !== 0xff) {
+      p++;
+      continue;
+    }
+    const marker = /** @type {number} */ (b[p + 1]);
+    if (marker === 0xd8 || (marker >= 0xd0 && marker <= 0xd7) || marker === 0x01 || marker === 0xff) {
+      p += marker === 0xff ? 1 : 2;
+      continue;
+    }
+    const len = ((/** @type {number} */ (b[p + 2])) << 8) | /** @type {number} */ (b[p + 3]);
+    if ((marker >= 0xc0 && marker <= 0xc3) || (marker >= 0xc5 && marker <= 0xc7) || (marker >= 0xc9 && marker <= 0xcb) || (marker >= 0xcd && marker <= 0xcf)) {
+      return {
+        height: ((/** @type {number} */ (b[p + 5])) << 8) | /** @type {number} */ (b[p + 6]),
+        width: ((/** @type {number} */ (b[p + 7])) << 8) | /** @type {number} */ (b[p + 8]),
+        components: /** @type {number} */ (b[p + 9]),
+      };
+    }
+    if (marker === 0xda) break; // SOS: 以降は画像データ
+    p += 2 + len;
+  }
+  return null;
+}
+
+/**
+ * computed background-image の `url("...")` を取り出す。複数指定・グラデーションは null。
+ * @param {string} value
+ * @returns {string|null}
+ */
+export function parseBackgroundUrl(value) {
+  if (!value || value === 'none') return null;
+  const parts = splitTopLevelCommas(value);
+  if (parts.length !== 1) return null;
+  const m = /^url\((?:"([^"]*)"|'([^']*)'|([^)]*))\)$/.exec(/** @type {string} */ (parts[0]).trim());
+  if (!m) return null;
+  return m[1] ?? m[2] ?? m[3] ?? null;
+}
+
+/** @param {string} s */
+function splitTopLevelCommas(s) {
+  /** @type {string[]} */
+  const out = [];
+  let depth = 0;
+  let cur = '';
+  for (const ch of s) {
+    if (ch === '(') depth++;
+    else if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) {
+      out.push(cur);
+      cur = '';
+    } else cur += ch;
+  }
+  if (cur.trim()) out.push(cur);
+  return out;
+}
+
+/**
+ * background-size / background-position / object-fit / object-position から描画矩形を計算する。
+ * @param {{x: number, y: number, w: number, h: number}} box  描画領域（px）
+ * @param {number} iw  画像の固有幅
+ * @param {number} ih
+ * @param {string} size      'auto' | 'cover' | 'contain' | '<w> <h>'（computed 値、px または %）
+ * @param {string} position  '0% 0%' | '50% 50%' | '10px 20px' …（computed 値、2 値）
+ * @returns {{x: number, y: number, w: number, h: number}}
+ */
+export function fitImage(box, iw, ih, size, position) {
+  let w;
+  let h;
+  const s = size.trim();
+  if (s === 'cover' || s === 'contain') {
+    const scale = s === 'cover' ? Math.max(box.w / iw, box.h / ih) : Math.min(box.w / iw, box.h / ih);
+    w = iw * scale;
+    h = ih * scale;
+  } else {
+    const [sw = 'auto', sh = 'auto'] = s.split(/\s+/);
+    const rw = sizeComponent(sw, box.w);
+    const rh = sizeComponent(sh, box.h);
+    if (rw === null && rh === null) {
+      w = iw;
+      h = ih;
+    } else if (rw === null) {
+      h = /** @type {number} */ (rh);
+      w = (iw * h) / ih;
+    } else if (rh === null) {
+      w = rw;
+      h = (ih * w) / iw;
+    } else {
+      w = rw;
+      h = rh;
+    }
+  }
+  const [px = '0%', py = '0%'] = position.trim().split(/\s+/);
+  const x = box.x + positionComponent(px, box.w - w);
+  const y = box.y + positionComponent(py, box.h - h);
+  return { x, y, w, h };
+}
+
+/** @param {string} v @param {number} ref @returns {number|null} */
+function sizeComponent(v, ref) {
+  if (v === 'auto') return null;
+  if (v.endsWith('%')) return (parseFloat(v) / 100) * ref;
+  return parseFloat(v) || 0;
+}
+
+/** @param {string} v @param {number} free */
+function positionComponent(v, free) {
+  if (v === 'left' || v === 'top') return 0;
+  if (v === 'center') return free / 2;
+  if (v === 'right' || v === 'bottom') return free;
+  if (v.endsWith('%')) return (parseFloat(v) / 100) * free;
+  return parseFloat(v) || 0;
+}
+
+/**
+ * object-fit を background-size 相当の値に変換する。
+ * @param {string} fit
+ * @returns {string}
+ */
+export function objectFitToSize(fit) {
+  switch (fit) {
+    case 'contain':
+    case 'scale-down':
+      return 'contain';
+    case 'cover':
+      return 'cover';
+    case 'none':
+      return 'auto';
+    default:
+      return '100% 100%';
+  }
+}

package/src/walker/text.js

@@ -0,0 +1,199 @@
+// @ts-check
+/**
+ * テキストノードの計測。
+ * Range を 1 文字ずつ張って各グリフの矩形を実測し、行ごとにグリフ列（GID・ペン位置）を返す。
+ * ブラウザのカーニング・letter-spacing・禁則・両端揃えの結果がそのまま位置に反映される。
+ */
+
+/**
+ * @typedef {object} MeasuredLine
+ * @property {import('../font/registry.js').RegisteredFont} font
+ * @property {number} baseline  ベースライン y（ビューポート座標 px）
+ * @property {number} top       行内グリフ矩形の上端
+ * @property {number} bottom    行内グリフ矩形の下端
+ * @property {import('./walk.js').Glyph[]} glyphs
+ */
+
+/**
+ * @typedef {object} MeasureOptions
+ * @property {import('../font/registry.js').FontRegistry} registry
+ * @property {string[]} families
+ * @property {string[]} fallback
+ * @property {import('../font/registry.js').RegisteredFont} primary
+ * @property {number} weight
+ * @property {'normal'|'italic'} fstyle
+ * @property {number} size  px
+ * @property {'font'|'measure'|'auto'} textMeasure
+ * @property {(w: import('../index.js').ConversionWarning) => void} warn
+ * @property {Element} element
+ */
+
+const WHITESPACE = new Set([0x20, 0x09, 0x0a, 0x0d, 0x0c, 0xa0, 0x3000, 0x2002, 0x2003, 0x2009, 0x200a, 0x202f, 0x205f]);
+
+/**
+ * @param {Text} node
+ * @param {CSSStyleDeclaration} style
+ * @param {MeasureOptions} o
+ * @returns {MeasuredLine[]}
+ */
+export function measureText(node, style, o) {
+  const doc = node.ownerDocument;
+  const text = applyTextTransform(node.data, style.textTransform);
+  const range = doc.createRange();
+  const baselineOffset = probeBaseline(doc, style);
+
+  /** @type {MeasuredLine[]} */
+  const lines = [];
+  /** @type {MeasuredLine|null} */
+  let cur = null;
+  let curTop = NaN;
+  /** @type {Set<number>} */
+  const warnedCps = new Set();
+
+  for (let i = 0; i < text.length; ) {
+    const cp = /** @type {number} */ (text.codePointAt(i));
+    const len = cp > 0xffff ? 2 : 1;
+    const end = i + len;
+
+    range.setStart(node, i);
+    range.setEnd(node, Math.min(end, node.data.length));
+    const rect = pickRect(range.getClientRects());
+    i = end;
+    if (!rect) continue; // 折り畳まれた空白・改行
+
+    const resolved = resolveGlyph(cp, o, warnedCps);
+    if (!resolved) continue;
+    const { font, gid, cpForUnicode } = resolved;
+
+    const top = rect.top;
+    if (!cur || cur.font !== font || Math.abs(top - curTop) > 0.5) {
+      cur = { font, baseline: top + baselineOffset, top, bottom: rect.bottom, glyphs: [] };
+      curTop = top;
+      lines.push(cur);
+    }
+    cur.top = Math.min(cur.top, top);
+    cur.bottom = Math.max(cur.bottom, rect.bottom);
+    const advance = ((font.parsed.advances[gid] ?? 0) * o.size) / font.parsed.unitsPerEm;
+    cur.glyphs.push({ gid, cp: cpForUnicode, x: rect.left, advance });
+  }
+  return lines;
+}
+
+/**
+ * 1 文字分の矩形のうち幅を持つものを選ぶ。行末の折り返し位置では 2 つ返ることがある。
+ * @param {DOMRectList} rects
+ * @returns {DOMRect|null}
+ */
+function pickRect(rects) {
+  /** @type {DOMRect|null} */
+  let best = null;
+  for (const r of rects) {
+    if (r.width > 0.01 && (!best || r.width > best.width)) best = r;
+  }
+  return best;
+}
+
+/**
+ * コードポイントに対応するフォントと GID を決める。
+ * @param {number} cp
+ * @param {MeasureOptions} o
+ * @param {Set<number>} warnedCps
+ * @returns {{font: import('../font/registry.js').RegisteredFont, gid: number, cpForUnicode: number}|null}
+ */
+function resolveGlyph(cp, o, warnedCps) {
+  const tryFont = (/** @type {import('../font/registry.js').RegisteredFont|null} */ f, /** @type {number} */ c) => {
+    const gid = f?.parsed.cmap.get(c);
+    return f && gid ? { font: f, gid, cpForUnicode: cp } : null;
+  };
+
+  // 空白類: 主フォントの同じ文字 → U+0020 で代替（位置は実測値で補正されるので幅は問わない）
+  if (WHITESPACE.has(cp)) {
+    return tryFont(o.primary, cp) ?? tryFont(o.primary, 0x20) ?? tryFont(o.registry.anyWithGlyph(0x20, o.weight, o.fstyle), 0x20);
+  }
+
+  let hit = tryFont(o.primary, cp);
+  if (hit) return hit;
+  hit = tryFont(o.registry.match(o.families, o.weight, o.fstyle, cp), cp);
+  if (hit) return hit;
+  hit = tryFont(o.registry.match(o.fallback, o.weight, o.fstyle, cp), cp);
+  if (hit) return hit;
+  hit = tryFont(o.registry.anyWithGlyph(cp, o.weight, o.fstyle), cp);
+  if (hit) return hit;
+
+  if (!warnedCps.has(cp)) {
+    warnedCps.add(cp);
+    o.warn({
+      code: 'missing-glyph',
+      message: `No registered font has a glyph for U+${cp.toString(16).toUpperCase().padStart(4, '0')} "${String.fromCodePoint(cp)}"; substituted with U+25A1`,
+      element: o.element,
+      text: String.fromCodePoint(cp),
+    });
+  }
+  // 豆腐（□）で代替。ToUnicode には元の文字を残す
+  const sub = tryFont(o.primary, 0x25a1) ?? tryFont(o.registry.anyWithGlyph(0x25a1, o.weight, o.fstyle), 0x25a1);
+  return sub ? { ...sub, cpForUnicode: cp } : null;
+}
+
+/**
+ * @param {string} s
+ * @param {string} transform  computed text-transform
+ * @returns {string}
+ */
+function applyTextTransform(s, transform) {
+  if (!transform || transform === 'none') return s;
+  let out = s;
+  if (transform.includes('uppercase')) out = s.toUpperCase();
+  else if (transform.includes('lowercase')) out = s.toLowerCase();
+  else if (transform.includes('capitalize')) out = s.replace(/(^|\s)(\p{L})/gu, (m, sp, ch) => sp + ch.toUpperCase());
+  // 長さが変わる変換（ß → SS など）は Range のオフセットと対応が取れないので諦める
+  return out.length === s.length ? out : s;
+}
+
+/** @type {WeakMap<Document, Map<string, number>>} */
+const probeCache = new WeakMap();
+
+/**
+ * この font 指定で描いたテキストの Range 矩形の上端から、ベースラインまでの距離（px）を実測する。
+ * inline-block（vertical-align: baseline）の下端がベースライン位置に一致することを利用する。
+ * @param {Document} doc
+ * @param {CSSStyleDeclaration} style
+ * @returns {number}
+ */
+function probeBaseline(doc, style) {
+  const key = [style.fontFamily, style.fontSize, style.fontWeight, style.fontStyle, style.fontStretch, style.fontVariant, style.fontFeatureSettings].join('|');
+  let cache = probeCache.get(doc);
+  if (!cache) {
+    cache = new Map();
+    probeCache.set(doc, cache);
+  }
+  const cached = cache.get(key);
+  if (cached !== undefined) return cached;
+
+  const probe = doc.createElement('div');
+  probe.setAttribute('data-rhtp-probe', '');
+  probe.style.cssText = 'position:absolute;left:0;top:0;visibility:hidden;white-space:pre;line-height:normal;margin:0;padding:0;border:0;letter-spacing:0;text-indent:0;';
+  probe.style.fontFamily = style.fontFamily;
+  probe.style.fontSize = style.fontSize;
+  probe.style.fontWeight = style.fontWeight;
+  probe.style.fontStyle = style.fontStyle;
+  probe.style.fontStretch = style.fontStretch;
+  probe.style.fontVariant = style.fontVariant;
+  probe.style.fontFeatureSettings = style.fontFeatureSettings;
+  const textNode = doc.createTextNode('Agあ');
+  probe.appendChild(textNode);
+  const mark = doc.createElement('span');
+  mark.style.cssText = 'display:inline-block;width:0;height:0;vertical-align:baseline;margin:0;padding:0;border:0;';
+  probe.appendChild(mark);
+  doc.body.appendChild(probe);
+
+  const range = doc.createRange();
+  range.selectNodeContents(textNode);
+  const textRect = range.getBoundingClientRect();
+  const markRect = mark.getBoundingClientRect();
+  const offset = markRect.bottom - textRect.top;
+  probe.remove();
+
+  const result = Number.isFinite(offset) && offset > 0 ? offset : parseFloat(style.fontSize) * 0.8;
+  cache.set(key, result);
+  return result;
+}