@meframe/core
Version:
Next generation media processing framework based on WebCodecs
96 lines • 2.74 kB
TypeScript
/**
* Canvas utility functions for handling DPI and high-quality rendering
*/
/**
* Setup canvas with proper DPI handling for Retina/HiDPI displays
*
* @param canvas - HTMLCanvasElement to configure
* @param displayWidth - CSS display width in logical pixels
* @param displayHeight - CSS display height in logical pixels
* @returns Actual canvas dimensions (considering DPI)
*
* @example
* const canvas = document.createElement('canvas');
* const dims = setupCanvasDPI(canvas, 540, 960);
* console.log(dims); // { width: 1080, height: 1920 } on 2x DPI screen
*/
export declare function setupCanvasDPI(canvas: HTMLCanvasElement, displayWidth: number, displayHeight: number): {
width: number;
height: number;
};
/**
* Get recommended composition canvas size based on display canvas
*
* @param displayCanvas - The preview canvas element
* @returns Recommended composition dimensions
*
* @example
* const canvas = document.getElementById('preview');
* const composeSize = getCompositionSize(canvas);
* // Use composeSize.width and composeSize.height for Meframe config
*/
export declare function getCompositionSize(displayCanvas: HTMLCanvasElement): {
width: number;
height: number;
};
/**
* Create a high-DPI canvas with proper settings
*
* @param container - Optional container element to append canvas to
* @param options - Canvas configuration options
* @returns Configured canvas element and its dimensions
*
* @example
* const { canvas, dimensions } = createHiDPICanvas(document.body, {
* displayWidth: 540,
* displayHeight: 960,
* });
*
* const meframe = await Meframe.create({
* canvas,
* config: {
* compose: {
* canvas: {
* width: dimensions.width,
* height: dimensions.height,
* }
* }
* }
* });
*/
export declare function createHiDPICanvas(container?: HTMLElement, options?: {
displayWidth: number;
displayHeight: number;
className?: string;
id?: string;
}): {
canvas: HTMLCanvasElement;
dimensions: {
width: number;
height: number;
};
};
/**
* Check if canvas DPI is properly configured
*
* @param canvas - Canvas element to check
* @returns Diagnostic information about canvas DPI setup
*
* @example
* const info = checkCanvasDPI(myCanvas);
* if (!info.isOptimal) {
* console.warn('Canvas DPI not optimal:', info.message);
* }
*/
export declare function checkCanvasDPI(canvas: HTMLCanvasElement): {
dpr: number;
canvasWidth: number;
canvasHeight: number;
displayWidth: number;
displayHeight: number;
expectedWidth: number;
expectedHeight: number;
isOptimal: boolean;
message: string;
};
//# sourceMappingURL=canvas-utils.d.ts.map