@cf-wasm/og/dist/dts/core/render.d.ts

Generate Open Graph Images dynamically from HTML/CSS without a browser.

import type { ReactNode } from 'react';
import type { EmojiType } from './emoji';
import { type FontBuffer } from './font';
import type { ResvgRenderOptions } from './resvg';
import type { Font as SatoriFont, SatoriOptions, VNode } from './satori';
import type { MayBePromise, StringWithSuggestions } from './types';
/** Represents a png result of rendered image */
export interface PngResult {
    pixels: Uint8Array;
    image: Uint8Array;
    /** The width of the image */
    width: number;
    /** The height of the image */
    height: number;
    /** The mime type of the image */
    type: string;
}
/** Represents a svg result of rendered image */
export interface SvgResult {
    /** The svg image as string */
    image: string;
    /** The width of the image */
    width: number;
    /** The height of the image */
    height: number;
    /** The mime type of the image */
    type: string;
}
export interface RenderSatoriOptions extends Omit<SatoriOptions, 'width' | 'height' | 'fonts' | 'loadAdditionalAsset' | 'debug'> {
}
export interface RenderResvgOptions extends Omit<ResvgRenderOptions, 'fitTo'> {
}
export type Font = Omit<SatoriFont, 'data'> & FontBuffer;
/** An interface representing options for {@link render} function */
export interface RenderOptions {
    /**
     * The width of the image.
     *
     * @default 1200
     */
    width?: number;
    /**
     * The height of the image.
     *
     * @default 630
     */
    height?: number;
    /**
     * Display debug information on the image.
     *
     * @default false
     */
    debug?: boolean;
    /** The default font to use */
    defaultFont?: FontBuffer;
    /**
     * A list of fonts to use.
     *
     * @default Noto Sans Latin Regular.
     */
    fonts?: Font[];
    /**
     * A callback function for loading dynamic assets requested by satori
     *
     * @param languageCode
     * The detected language codes separated using `|` (i.e: `ja-JP|zh-CN|zh-TW|zh-HK`, `devanagari`, etc.)
     *
     * `emoji` if it's an Emoji
     *
     * `unknown` if not able to tell.
     *
     * @param segment Content to render.
     * @param next A function which when called returns a Promise resolves to the next result
     */
    loadAdditionalAsset?: (languageCode: StringWithSuggestions<'emoji' | 'unknown'>, segment: string, next: () => Promise<string | Font[]>) => MayBePromise<undefined | string | Font[]>;
    /**
     * Using a specific Emoji style. Defaults to `twemoji`.
     *
     * @default 'twemoji'
     */
    emoji?: EmojiType;
    /**
     * The format of response, can be one of `svg` or `png`
     */
    format?: 'svg' | 'png';
    /**
     * Passes {@link RenderSatoriOptions} to satori
     */
    satoriOptions?: RenderSatoriOptions;
    /**
     * Passes {@link RenderResvgOptions} to resvg
     */
    resvgOptions?: RenderResvgOptions;
}
/** Default render options */
export declare const RENDER_DEFAULT_OPTIONS: {
    width: number;
    height: number;
    debug: boolean;
    fonts: never[];
};
/**
 * Renders {@link ReactNode} to image
 *
 * @param element The {@link ReactNode}
 * @param options The {@link RenderOptions}
 *
 * @returns An object containing methods for rendering the input element to image
 */
export declare const render: (element: ReactNode | VNode, options?: RenderOptions) => {
    asSvg: () => Promise<SvgResult>;
    asPng: () => Promise<PngResult>;
};