merge-images-grid/esm/index.d.ts

Merge images on canvas,looks likes grid template!Can be used both of node and browser.

import type { Canvas, Image, NodeCanvasRenderingContext2D } from 'canvas';
export interface CanvasGridProps {
    /** Canvas | HTMLCanvasElement */
    canvas: Canvas | HTMLCanvasElement;
    /** canvas background color */
    bgColor?: string;
    /** cell width */
    width?: number;
    /** cell height */
    height?: number;
    /** grid's padding default 10 */
    padding?: number | number[];
    /** a way of alignment each box along the appropriate axis,like css 'align-items',default 'center' */
    alignItems?: 'center' | 'start' | 'end';
    /** a way of justifying each box along the appropriate axis,like css 'justify-items',default 'center' */
    justifyItems?: 'center' | 'start' | 'end';
    /** image list */
    list: ItemConfig[];
    /** gap between each cell,default 10 */
    gap?: number | [number, number];
    /** column number default 3 */
    col?: number;
    /**
     * columns's width type,default 'max'
     *
     * 'max': all columns's width will be the same(cell's max width).
     *
     * 'min': each columns's width will be the max of columns's cell.
     *
     * 'auto': if colSpan > 1 ,the cell colSpan columns's width will be the same.
     *
     * 'fixed': if CanvasGridProps['width'] set,all columns's width will be CanvasGridProps['width'],else the same as 'max'.
     */
    widthType?: 'max' | 'min' | 'auto' | 'fixed';
    /** cell's height type,default 'auto' */
    heightType?: 'max' | 'min' | 'auto' | 'fixed';
    /**
     * image draw type,like css 'object-fit' default:'contain'
     *
     * 'auto': if image overflow the cell,will be the same as 'contain'
     */
    objectFit?: 'auto' | 'contain' | 'fill' | 'cover';
}
export declare type ItemConfig = {
    /** colSpan of this cell */
    colSpan?: number;
    /** rowSpan of this cell */
    rowSpan?: number;
    /** cell's image */
    image?: Image | Canvas;
} & Pick<CanvasGridProps, 'width' | 'height' | 'alignItems' | 'justifyItems' | 'objectFit'>;
interface Template extends ItemConfig {
    realWidth: number;
    realHeight: number;
    /** 最大绘图宽度 */
    maxWidth: number;
    /** 最大绘图高度 */
    maxHeight: number;
    colSpan: number;
    rowSpan: number;
    alignItems: 'center' | 'start' | 'end';
    justifyItems: 'center' | 'start' | 'end';
    objectFit?: 'auto' | 'contain' | 'fill' | 'cover';
}
declare class CanvasGrid {
    itemWidth?: number;
    itemHeight?: number;
    left: number;
    top: number;
    bottom: number;
    right: number;
    gap: [number, number];
    alignItems: 'center' | 'start' | 'end';
    justifyItems: 'center' | 'start' | 'end';
    list: CanvasGridProps['list'];
    col: number;
    canvas: Canvas;
    ctx: NodeCanvasRenderingContext2D;
    template: Template[][];
    colTemplate: Template[][];
    bgColor?: string;
    colWidths: number[];
    rowHeights: number[];
    widthType: 'max' | 'min' | 'auto' | 'fixed';
    heightType: 'max' | 'min' | 'auto' | 'fixed';
    objectFit: 'auto' | 'contain' | 'fill' | 'cover';
    constructor(props: CanvasGridProps);
    private initTemplate;
    render(): void;
    /** 追加数据 */
    appendData(list: CanvasGridProps['list']): void;
    private renderGrid;
    /** 设置canvas大小 */
    private setSsize;
    private setFitWH;
    private getColTemplate;
    private getEmpty;
}
export default CanvasGrid;