image-wire/dist/image-wire.d.ts

0 dependencies, less than 1kb library to glue images together

interface Options {
    /**
     * A number indicating the gap (in pixels) between each images.
     * The default value is '0' (no gaps).
     */
    gap: number;
    /**
     * A string indicating in which direction the image are going to be glued together.
     * The default direction is 'horizontal'.
     */
    direction: 'horizontal' | 'vertical';
    /**
     * A string indicating the image format.
     * The default format type is 'image/png'.
     */
    type: string & ('image/jpeg' | 'image/png' | 'image/webp');
    /**
     * A number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp.
     * The default value is '0.92'.
     */
    quality: number;
    /**
     * A string, canvas gradient or canvas pattern used to fill the background.
     * There is no default.
     */
    color?: string | CanvasGradient | CanvasPattern;
}
/**
 * image-wire takes a list of sources (URLs or FileList from an input[type="file"]) and glue them together to form a single image.
 *
 * @param sources {string[] | FileList} - List of images. Can be a list of URLs or a FileList from an input[type="file"]
 * @param options {Partial<Options>} - List of options
 *
 * @example
 * ```ts
 * import { image-wire } from 'image-wire';
 *
 * const img = document.querySelector('img');
 * const input = document.querySelector('input');
 *
 * input.addEventListener('change', async (e) => {
 *   const { files } = e.target as HTMLInputElement;
 *
 *   const [src, blob] = await image-wire(files, {
 *     direction: 'vertical',
 *     gap: 100,
 *     color: 'red',
 *   });
 *
 *   img.src = src;
 *
 *   uploadImage(blob);
 * });
 * ```
 */
export declare function imageWire(sources: string[] | FileList, options?: Partial<Options>): Promise<readonly [string, Blob]>;
export {};