grokbot_ty
44d428b6f4
Product call for the WooCommerce redo. Calculate accepts sources whose post-crop shorter side is at least 800px. Warn copy and CAPTURE.md match. No upscale still holds.
84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import type { Mask, Source } from '../capture/capture.types';
|
|
|
|
const FLOOR = 800; // shorter side, px
|
|
const FILL = 0.8; // 80% fill at the widest and tallest points of the slab
|
|
const ASPECT_W = 3;
|
|
const ASPECT_H = 4;
|
|
|
|
type MaskPick = Pick<Mask, 'bitset' | 'slabBounds'>;
|
|
type SourcePick = Pick<Source, 'widthPx' | 'heightPx'>;
|
|
|
|
export interface InventoryInput {
|
|
bitmap: ImageBitmap;
|
|
mask: MaskPick;
|
|
source: SourcePick;
|
|
}
|
|
|
|
export interface Frame {
|
|
width: number;
|
|
height: number;
|
|
rgba: Uint8Array;
|
|
sourceBelowFloor: boolean;
|
|
}
|
|
|
|
export function composeInventoryFrame(
|
|
src: { width: number; height: number; rgba: Uint8Array | Uint8ClampedArray },
|
|
mask: MaskPick,
|
|
source: SourcePick,
|
|
): Frame {
|
|
const b = mask.slabBounds;
|
|
const x0 = Math.max(0, Math.round(b.x));
|
|
const y0 = Math.max(0, Math.round(b.y));
|
|
const x1 = Math.min(source.widthPx, x0 + Math.max(1, Math.round(b.w)));
|
|
const y1 = Math.min(source.heightPx, y0 + Math.max(1, Math.round(b.h)));
|
|
const sw = x1 - x0;
|
|
const sh = y1 - y0;
|
|
const belowFloor = Math.min(sw, sh) < FLOOR;
|
|
const outW = belowFloor ? Math.max(1, Math.min(sw, FLOOR)) : FLOOR;
|
|
const outH = Math.round((outW * ASPECT_H) / ASPECT_W);
|
|
const scale = Math.min((outW * FILL) / Math.max(sw, 1), (outH * FILL) / Math.max(sh, 1));
|
|
const dw = sw * scale;
|
|
const dh = sh * scale;
|
|
const ox = (outW - dw) / 2;
|
|
const oy = (outH - dh) / 2;
|
|
const rgba = new Uint8Array(outW * outH * 4);
|
|
const xEnd = ox + dw;
|
|
const yEnd = oy + dh;
|
|
for (let y = 0; y < outH; y++) {
|
|
for (let x = 0; x < outW; x++) {
|
|
if (x + 0.5 < ox || x + 0.5 >= xEnd || y + 0.5 < oy || y + 0.5 >= yEnd) continue;
|
|
const sx = Math.floor(x0 + (x + 0.5 - ox) / scale);
|
|
const sy = Math.floor(y0 + (y + 0.5 - oy) / scale);
|
|
if (sx < 0 || sy < 0 || sx >= source.widthPx || sy >= source.heightPx) continue;
|
|
if (mask.bitset[sy * source.widthPx + sx] !== 1) continue;
|
|
const si = (sy * source.widthPx + sx) * 4;
|
|
const di = (y * outW + x) * 4;
|
|
rgba[di] = src.rgba[si];
|
|
rgba[di + 1] = src.rgba[si + 1];
|
|
rgba[di + 2] = src.rgba[si + 2];
|
|
rgba[di + 3] = 255;
|
|
}
|
|
}
|
|
return { width: outW, height: outH, rgba, sourceBelowFloor: belowFloor };
|
|
}
|
|
|
|
export async function encodeInventoryPng(
|
|
input: InventoryInput,
|
|
): Promise<{ blob: Blob; sourceBelowFloor: boolean }> {
|
|
const { bitmap, mask, source } = input;
|
|
const srcCanvas = new OffscreenCanvas(source.widthPx, source.heightPx);
|
|
const srcCtx = srcCanvas.getContext('2d')!;
|
|
srcCtx.drawImage(bitmap, 0, 0);
|
|
const img = srcCtx.getImageData(0, 0, source.widthPx, source.heightPx);
|
|
const frame = composeInventoryFrame(
|
|
{ width: source.widthPx, height: source.heightPx, rgba: img.data },
|
|
mask,
|
|
source,
|
|
);
|
|
const out = new OffscreenCanvas(frame.width, frame.height);
|
|
const ctx = out.getContext('2d')!;
|
|
ctx.putImageData(new ImageData(new Uint8ClampedArray(frame.rgba), frame.width, frame.height), 0, 0);
|
|
const blob = await out.convertToBlob({ type: 'image/png' });
|
|
return { blob, sourceBelowFloor: frame.sourceBelowFloor };
|
|
}
|