UNPKG

@danielbiegler/vendure-plugin-blurry-image-lazy-loading

Version:

Generates image hashes for displaying blurry previews when loading images on the frontend.

69 lines (68 loc) 2.39 kB
/// <reference types="node" /> import sharp from "sharp"; import { PluginPreviewImageHashCreateInput } from "../generated-admin-types"; import { PreviewImageHashBase, PreviewImageHashStrategy } from "./PreviewImageHashStrategy"; type ConstructorArgs = { /** * Will be passed into Sharp for resizing the asset before hashing. This means all * the default values of Sharp apply, except for `width` and `background`. * * Set only `width` OR `height` if you want to scale the second axis automatically. * If you set neither, `width` will become the default `64` to ensure you're not hashing the full size asset. * * Sharps `background` by default is black, but we overwrite it with white. * * @default width: 64 // Only if both `width` and `height` are undefined! * @default background: { r: 255, g: 255, b: 255, alpha: 1 } */ resizeOptions?: sharp.ResizeOptions; /** * Used when serializing the hash into a string. Your frontend needs to know this to be able to parse it correctly. * * @default "base64" * * @example * ```javascript * // Encoding * Buffer.from(hash).toString("base64") * ``` * * @example * ```javascript * // Decoding * Buffer.from(string, "base64") * ``` */ encoding?: BufferEncoding; /** * Must be between (inclusive) 1-9 * * More components will result in more detail, but increase the hash length. * * @throws `encode` will throw if this number is not between 1-9 * @default 4 */ componentX?: number; /** * Must be between (inclusive) 1-9 * * More components will result in more detail, but increase the hash length. * * @throws `encode` will throw if this number is not between 1-9 * @default 3 */ componentY?: number; }; /** * A very compact representation of a placeholder for an image. * Store it inline with your data and show it while the real image is loading for a smoother loading experience. * * @category Strategy */ export declare class BlurHashStrategy extends PreviewImageHashBase implements PreviewImageHashStrategy { constructor(args?: ConstructorArgs); private componentX; private componentY; encode(buffer: sharp.Sharp, input: PluginPreviewImageHashCreateInput): Promise<string>; } export {};