Open Graph image

// Both font components accept application/x-www-form-urlencoded. The `title`
// field must be present but may be empty; `subtitle` is optional. Input is
// limited to 4 KiB, each field to 2 KiB, and each field to 16 wrapped lines.
//
// The renderers support Latin-1 from U+0020 through U+00FF, except soft hyphen
// U+00AD. They do not provide bidirectional layout, hyphenation, or font
// fallback. Inter is proportional and applies pair kerning. DejaVu is monospaced.
//
// Output is a self-contained 1200x630 SVG made from paths. The viewer does not
// need the font. Choose one font component:
import * as ogImageRenderer from "./text-to-og-image-svg-inter.wasm";
// import * as ogImageRenderer from "./text-to-og-image-svg-dejavu-sans-mono.wasm";

// The SVG rasterizer produces a BGRA BMP. The other two components encode that
// BMP as PNG or lossless WebP. Remove imports and calls for formats you do not use.
import * as svgRasterizer from "./svg-rasterize-to-bmp-b8g8r8a8-srgb.wasm";
import * as pngEncoder from "./bmp-to-png.wasm";
// This lossless WebP encoder reserves 1.5 GiB of Wasm memory when imported.
import * as webpEncoder from "./bmp-b8g8r8a8-srgb-to-webp-lossless.wasm";

const encoder = new TextEncoder();
const decoder = new TextDecoder("utf-8", { fatal: true });

function renderOutput(exports, inputSize) {
  const result = BigInt.asUintN(64, exports.render(inputSize));
  if ((result >> 63n) !== 0n) throw new Error("rejected input");
  return {
    size: Number(result & 0xffff_ffffn),
    ptr: Number((result >> 32n) & 0x7fff_ffffn),
  };
}

export function renderOGImageToSVG({
  title = "",
  subtitle = "",
  textColor = 0xffffffff,
  backgroundColor = 0x4b2e83ff,
  fontMaxSize = 112,
  fontWeight = 700,
} = {}) {
  const form = new URLSearchParams({ title, subtitle }).toString();
  const input = new Uint8Array(
    ogImageRenderer.memory.buffer,
    ogImageRenderer.input_ptr(),
    ogImageRenderer.input_utf8_cap(),
  );
  const { read, written } = encoder.encodeInto(form, input);
  if (read !== form.length) {
    throw new RangeError("Open Graph image input is too large");
  }
  ogImageRenderer.uniform_set_text_color_rgba(textColor);
  ogImageRenderer.uniform_set_background_color_rgba(backgroundColor);
  ogImageRenderer.uniform_set_font_max_size(fontMaxSize);
  ogImageRenderer.uniform_set_font_weight(fontWeight);

  const output = renderOutput(ogImageRenderer, written);
  if (output.size > ogImageRenderer.output_utf8_cap()) {
    throw new RangeError("Open Graph image output is too large");
  }
  return decoder.decode(new Uint8Array(
    ogImageRenderer.memory.buffer,
    output.ptr,
    output.size,
  ));
}

export function renderOGImageToPNG(options) {
  const svg = renderOGImageToSVG(options);
  const input = new Uint8Array(
    svgRasterizer.memory.buffer,
    svgRasterizer.input_ptr(),
    svgRasterizer.input_utf8_cap(),
  );
  const { read, written } = encoder.encodeInto(svg, input);
  if (read !== svg.length) {
    throw new RangeError("Open Graph SVG is too large to rasterize");
  }
  const bmpOutput = renderOutput(svgRasterizer, written);
  if (bmpOutput.size > svgRasterizer.output_bytes_cap()) {
    throw new RangeError("Open Graph BMP output is too large");
  }
  const bmp = new Uint8Array(
    svgRasterizer.memory.buffer,
    bmpOutput.ptr,
    bmpOutput.size,
  );
  if (bmp.length > pngEncoder.input_bytes_cap()) {
    throw new RangeError("Open Graph BMP input is too large");
  }
  new Uint8Array(
    pngEncoder.memory.buffer,
    pngEncoder.input_ptr(),
    bmp.length,
  ).set(bmp);
  const pngOutput = renderOutput(pngEncoder, bmp.length);
  if (pngOutput.size > pngEncoder.output_bytes_cap()) {
    throw new RangeError("Open Graph PNG output is too large");
  }
  return new Uint8Array(
    pngEncoder.memory.buffer,
    pngOutput.ptr,
    pngOutput.size,
  ).slice();
}

export function renderOGImageToWebp(options) {
  const svg = renderOGImageToSVG(options);
  const input = new Uint8Array(
    svgRasterizer.memory.buffer,
    svgRasterizer.input_ptr(),
    svgRasterizer.input_utf8_cap(),
  );
  const { read, written } = encoder.encodeInto(svg, input);
  if (read !== svg.length) {
    throw new RangeError("Open Graph SVG is too large to rasterize");
  }
  const bmpOutput = renderOutput(svgRasterizer, written);
  if (bmpOutput.size > svgRasterizer.output_bytes_cap()) {
    throw new RangeError("Open Graph BMP output is too large");
  }
  const bmp = new Uint8Array(
    svgRasterizer.memory.buffer,
    bmpOutput.ptr,
    bmpOutput.size,
  );
  if (bmp.length > webpEncoder.input_bytes_cap()) {
    throw new RangeError("Open Graph BMP input is too large");
  }
  new Uint8Array(
    webpEncoder.memory.buffer,
    webpEncoder.input_ptr(),
    bmp.length,
  ).set(bmp);
  const webpOutput = renderOutput(webpEncoder, bmp.length);
  if (webpOutput.size > webpEncoder.output_bytes_cap()) {
    throw new RangeError("Open Graph WebP output is too large");
  }
  return new Uint8Array(
    webpEncoder.memory.buffer,
    webpOutput.ptr,
    webpOutput.size,
  ).slice();
}

const options = {
  title: "Reusable components",
  subtitle: "Rendered locally with embedded Inter paths",
  textColor: 0xffffffff,
  backgroundColor: 0x4b2e83ff,
  fontMaxSize: 112,
  fontWeight: 700,
};

const svg = renderOGImageToSVG(options);
const png = renderOGImageToPNG(options);
const webp = renderOGImageToWebp(options);

console.log({ svg, png, webp });