@alegendstale/holly-components/dist/components/canvas/canvas-image.d.ts

Reusable UI components created using lit

import { PropertyValues } from 'lit';
import quantize from 'quantize';
import { CanvasBase } from './canvas-base.js';
declare const imageStatus: readonly ["idle", "loading", "success", "error"];
type ImageStatus = typeof imageStatus[number];
/**
 * Utility component to make creating and retrieving image colors easier based on canvas coordinates.
 *
 * @dependency canvas-base
 */
export declare class CanvasImage extends CanvasBase {
    static styles: import("lit").CSSResult[];
    /** The image element. */
    protected image?: HTMLImageElement;
    /** The image URL. */
    imageURL: string;
    /** Whether to apply smoothing to the image generated by the canvas. */
    smoothing: boolean;
    /** The canvas width. */
    width: number;
    /** The canvas height. */
    height: number;
    /** @readonly Used to style the canvas based on its current state. */
    protected status: ImageStatus;
    protected updated(_changedProperties: PropertyValues): void;
    get updateComplete(): Promise<boolean>;
    render(): import("lit-html").TemplateResult<1>;
    /**
     * Updates & loads the canvas image.
     * Attempts to preserve aspect ratio based on width.
     */
    private _performDraw;
    /** @internal Handle errors when the image fails to load. */
    private _handleLoadError;
    /**
     * Gets the most frequent colors in an image.
     * @param numColors Number of colors to return
     * @param quality Artificially reduce number of pixels (higher = less accurate but faster)
     * @returns Most frequent colors
     */
    getPalette(numColors?: number, quality?: number): Promise<quantize.RgbPixel[] | null>;
    /**
     * Creates an array of pixels from the image.
     * Inspired by colorthief
     * @param quality Artificially reduce number of pixels (higher = less accurate but faster)
     * @returns Array of pixels
     */
    createPixelArray(quality: number): Promise<quantize.RgbPixel[] | null>;
    /** Gets the image data from the canvas. */
    getImageData(x?: number, y?: number): Promise<ImageData>;
}
declare global {
    interface HTMLElementTagNameMap {
        'canvas-image': CanvasImage;
    }
}
export {};
//# sourceMappingURL=canvas-image.d.ts.map