ts-browser-helpers/dist/image.d.ts

A collection of utility classes, functions and decorators for javascript/typescript projects, for use in the browser.

/**
 * Convert an image {@link ImageBitmap} or {@link CanvasImageSource} to a new canvas with a max width. Good for resizing images keeping the aspect ratio and generating previews.
 * @param bitmap - image to convert
 * @param maxWidth - maximum width of the image (default: 8192). Images larger than this will be scaled down. This is because strings can get too long.
 * @param detachBitmap - detach the bitmap after conversion (default: false). This will free up bitmap memory if you don't need it anymore.
 *
 * See also {@link imageUrlToImageData}, {@link imageBitmapToBase64}, {@link imageBitmapToBlob}
 *
 * @category Images
 */
export declare function imageBitmapToCanvas(bitmap: ImageBitmap | CanvasImageSource | any, maxWidth?: number, detachBitmap?: boolean): HTMLCanvasElement;
/**
 * Convert an image {@link ImageBitmap} or {@link CanvasImageSource} to a base64 data url.
 * @param bitmap - image to convert
 * @param maxWidth - maximum width of the image (default: 8192). Images larger than this will be scaled down. This is because strings can get too long.
 * @param detachBitmap - detach the bitmap after conversion (default: false). This will free up bitmap memory if you don't need it anymore.
 * @param type - mime type of the data url (default: 'image/png')
 *
 * See also {@link imageUrlToImageData}, {@link imageBitmapToCanvas}, {@link imageBitmapToBlob}
 *
 * @category Images
 */
export declare function imageBitmapToBase64(bitmap: ImageBitmap | Exclude<CanvasImageSource, VideoFrame>, maxWidth?: number, detachBitmap?: boolean, type?: string): string;
/**
 * Convert an image {@link ImageBitmap} or {@link CanvasImageSource} to a blob.
 * @param bitmap - image to convert
 * @param maxWidth - maximum width of the image (default: 8192). Images larger than this will be scaled down. This is because strings can get too long.
 * @param detachBitmap - detach the bitmap after conversion (default: false). This will free up bitmap memory if you don't need it anymore.
 * @param type - mime type of the blob (default: 'image/png')
 *
 * See also {@link imageUrlToImageData}, {@link imageBitmapToCanvas}, {@link imageBitmapToBase64}
 *
 * @category Images
 */
export declare function imageBitmapToBlob(bitmap: ImageBitmap | Exclude<CanvasImageSource, VideoFrame>, maxWidth?: number, detachBitmap?: boolean, type?: string): Promise<Blob>;
/**
 * Downloads/parse the image from an url/data url and draw to an {@link ImageData} object.
 * @param url - url or data url of the image
 * @returns ImageData object
 *
 * See also {@link imageBitmapToBase64}
 *
 * @category Images
 */
export declare function imageUrlToImageData(url: string): Promise<ImageData>;
/**
 * Options for {@link imageToCanvas}.
 *
 * @category Images
 */
export interface ImageCanvasOptions {
    width: number;
    height: number;
    backgroundColor?: string;
    scale?: number;
}
/**
 * Converts an HTML image to a canvas. This creates a new canvas element and draws the image on it.
 * @param image - image to convert
 * @param backgroundColor - background color of the canvas
 * @param scale - scale of the canvas
 * @param width - width of the canvas
 * @param height - height of the canvas
 * @returns a new canvas element
 *
 * @category Images
 */
export declare function imageToCanvas(image: HTMLImageElement, { backgroundColor, scale, width, height, }: ImageCanvasOptions): HTMLCanvasElement;
/**
 * Converts an {@link ImageData} to a canvas. This creates a new canvas element and draws the image data on it.
 * Image Data can be created from image pixels like from gl.readPixels
 * This can be used to convert a WebGL texture/render target to a canvas/data url.
 * Note: if the output is flipped, use {@link canvasFlipY} after this, like `canvasFlipY(imageDataToCanvas(imageData))`
 * @param data - image data to convert
 *
 * @category Images
 */
export declare function imageDataToCanvas(data: ImageData): HTMLCanvasElement;
/**
 * Check if the browser supports exporting to webp, with the canvas.toDataURL('image/webp') method.
 *
 * @category Images
 */
export declare function isWebpExportSupported(): boolean;
/**
 * Returns a new canvas with the image/canvas-content flipped vertically.
 * Useful for putImageData(as it does not respect scale and translate) and WebGL textures, which are flipped vertically.
 * @param canvas
 *
 * @category Images
 */
export declare function canvasFlipY(canvas: Exclude<CanvasImageSource, SVGImageElement | VideoFrame>): HTMLCanvasElement;
/**
 * Load a Blob or a file containing an image and return an HTMLImageElement.
 * @param blob
 *
 * @category Images
 */
export declare function blobToImage(blob: Blob): Promise<HTMLImageElement>;
//# sourceMappingURL=image.d.ts.map