Rotate wall frame portrait, letterbox feed to frame window

2026-09-08 18:14:25 +07:00
parent a1769e8c84
commit a16c8734a8
3 changed files with 73 additions and 47 deletions
@@ -7,7 +7,7 @@ import { Recipe, GPSInfo, FrameId } from '../types';
 import { getSkiaColorMatrix, applyExposureGain } from './colorUtils';
 import { TONE_SKSL, getToneUniforms, toneIsActive } from './toneShader';
 import { CINEMA_SKSL, getCinemaUniforms, cinemaIsActive } from './cinemaShader';
-import { drawFrameOnCanvas, polaroidLayout, POLAROID_CARD, POLAROID_WIN_W, wallframeLayout, WALLFRAME_IMG_W, WALLFRAME_IMG_H } from './frameUtils';
+import { drawFrameOnCanvas, polaroidLayout, POLAROID_CARD, POLAROID_WIN_W, wallframeLayout, WALLFRAME_W, WALLFRAME_H } from './frameUtils';
 import { patchJpegDpi } from './jpegDpi';

 export interface ExportResult {
@@ -260,10 +260,11 @@ export async function processAndExportPhoto(
    // processed picture is composited, uncropped, into the window of a bigger
    // off-white card (real print proportions, see frameUtils) — the export IS
    // the card, with the photo scaled to the window so it keeps ~WIN_W of the
-    // card width. WALL FRAME: the export IS the frame PNG at native resolution,
-    // with the photo cover-cropped (center) into the fixed 3:2 window (the mat
-    // opening of a real frame). Other frames (classic white border, legacy
-    // cinematic bars) draw over the photo-sized canvas as before.
+    // card width. WALL FRAME: the export IS the ROTATED frame PNG at its native
+    // portrait size (WALLFRAME_W x WALLFRAME_H), with the photo cover-cropped
+    // (center) into the fixed 2:3 window (the mat opening of a real frame).
+    // Other frames (classic white border, legacy cinematic bars) draw over the
+    // photo-sized canvas as before.
    let outputSurface: SkSurface = surface;
    let stampCanvas = canvas;
    let stampW = width;
@@ -306,13 +307,13 @@ export async function processAndExportPhoto(
      stampH = outH;
      framedWindow = win;
    } else if (frameId === 'wallframe') {
-      // Export at the PNG's native resolution: the mat artwork stays crisp and
-      // the photo crop inside the window is as large as the asset allows.
+      // Export at the ROTATED frame's native size (the frame is the product, so
+      // the file is exactly frame-sized — never the photo's own dimensions).
      const photoImg = surface.makeImageSnapshot();
      const pw = photoImg.width();
      const ph = photoImg.height();
-      const outW = WALLFRAME_IMG_W;
-      const outH = WALLFRAME_IMG_H;
+      const outW = WALLFRAME_W; // 3117
+      const outH = WALLFRAME_H; // 4000
      const cardSurface = createSurface(outW, outH);
      if (!cardSurface) {
        console.error('Failed to create wallframe surface');
@@ -350,8 +351,13 @@ export async function processAndExportPhoto(
        plainPaint
      );
      // Artwork over the crop: its transparent window reveals the photo, the
-      // mat covers the rest.
+      // mat covers the rest. The source PNG is landscape — rotate it 90° CW
+      // onto the portrait canvas (same affine as wallframeLayout.drawMatrix).
+      cardCanvas.save();
+      cardCanvas.translate(outW, 0);
+      cardCanvas.rotate(90, 0, 0);
      cardCanvas.drawImage(wfImage, 0, 0, plainPaint);
+      cardCanvas.restore();
      outputSurface = cardSurface;
      stampCanvas = cardCanvas;
      stampW = outW;
@@ -32,28 +32,40 @@ export interface PolaroidLayout {
 }

 // Wall frame: the PNG artwork lives at the project root (wallframe.png,
-// 4000x3117 RGBA, transparent window 675..3322 x 675..2441). Only the geometry
-// lives here; the bitmap itself is drawn by the caller (Viewfinder overlay /
-// export engine). The window is FIXED 3:2 landscape, so the photo is
-// cover-cropped (center) into it — the mat of a real frame hides the print
-// edges. Fractions are relative to the full PNG.
-export const WALLFRAME_IMG_W = 4000;
-export const WALLFRAME_IMG_H = 3117;
-export const WALLFRAME = {
-  winLeft: 675 / 4000, // 0.16875
-  winTop: 675 / 3117, // ≈ 0.21655
-  winW: 2648 / 4000, // 0.662
-  winH: 1767 / 3117, // ≈ 0.56689
+// 4000x3117 RGBA, transparent window cols 675..3322 x rows 675..2441). Only the
+// geometry lives here; the bitmap itself is drawn by the caller. The phone is
+// portrait, so the app shows the artwork ROTATED 90° CW (original top edge →
+// right edge): a portrait frame whose transparent window is a fixed 2:3
+// vertical opening. The photo is cover-cropped (center) into that opening — the
+// mat of a real frame hides the print edges. WALLFRAME_W/H and WALLFRAME_WIN
+// are the rotated display orientation; the affine in wallframeLayout maps the
+// source PNG pixels onto the frame rect so the drawn opening and the photo
+// window always line up.
+export const WALLFRAME_PNG_W = 4000; // source PNG width
+export const WALLFRAME_PNG_H = 3117; // source PNG height
+export const WALLFRAME_W = 3117; // rotated display width  (= PNG height)
+export const WALLFRAME_H = 4000; // rotated display height (= PNG width)
+// Transparent window as fractions of the rotated image, derived from the same
+// affine used to draw the bitmap: X = w - (y/3117)w, Y = (x/4000)h.
+export const WALLFRAME_WIN = {
+  left: 676 / 3117, // ≈ 0.21688
+  top: 675 / 4000, // 0.16875
+  w: 1766 / 3117, // ≈ 0.56657
+  h: 2647 / 4000, // 0.66175
 } as const;

 export interface WallframeLayout {
  frame: { x: number; y: number; w: number; h: number };
  window: { x: number; y: number; w: number; h: number };
+  // Row-major Skia matrix that rotates the source PNG (WALLFRAME_PNG_W/H) 90° CW
+  // into the frame rect. Feed it to <Group matrix> (viewfinder) or concat it on
+  // the canvas (export) before drawing the bitmap.
+  drawMatrix: number[];
 }

-// Geometry of the wall-frame PNG inside an arbitrary container. The PNG is
-// contain-fitted ('contain', centered, letterboxed) for the live viewfinder, or
-// stretched to fill exactly ('fill', export canvas already has PNG aspect).
+// Geometry of the ROTATED wall-frame inside an arbitrary container. The frame
+// is contain-fitted ('contain', centered, letterboxed) for the live viewfinder,
+// or fills the container exactly ('fill', export canvas already at frame size).
 export function wallframeLayout(
  contW: number,
  contH: number,
@@ -65,20 +77,22 @@ export function wallframeLayout(
    frameW = contW;
    frameH = contH;
  } else {
-    const s = Math.min(contW / WALLFRAME_IMG_W, contH / WALLFRAME_IMG_H);
-    frameW = WALLFRAME_IMG_W * s;
-    frameH = WALLFRAME_IMG_H * s;
+    const s = Math.min(contW / WALLFRAME_W, contH / WALLFRAME_H);
+    frameW = WALLFRAME_W * s;
+    frameH = WALLFRAME_H * s;
  }
  const fx = (contW - frameW) / 2;
  const fy = (contH - frameH) / 2;
+  const scale = frameW / WALLFRAME_W; // == frameH / WALLFRAME_H
  return {
    frame: { x: fx, y: fy, w: frameW, h: frameH },
    window: {
-      x: fx + WALLFRAME.winLeft * frameW,
-      y: fy + WALLFRAME.winTop * frameH,
-      w: WALLFRAME.winW * frameW,
-      h: WALLFRAME.winH * frameH,
+      x: fx + WALLFRAME_WIN.left * frameW,
+      y: fy + WALLFRAME_WIN.top * frameH,
+      w: WALLFRAME_WIN.w * frameW,
+      h: WALLFRAME_WIN.h * frameH,
    },
+    drawMatrix: [0, -scale, fx + frameW, scale, 0, fy, 0, 0, 1],
  };
 }