DOCSEARCHbyAlgolia
Submit Docs

blurify

repository·master·Indexed 20 days ago

https://github.com/hey-lee/blurify

A lightweight (~2kb) library for applying blur effects to images. It supports three rendering modes: 'css' using CSS filters, 'canvas' using base64 data URLs, and 'auto' for graceful degradation between the two. It can be initialized via a constructor pattern or a shorthand function call to target specific HTML image elements.

Tokens
969
Snippets
4
Records
6
Agent score
22%

What's inside blurify

  1. Use blurify to blur images

    master

    You can blur images using either the constructor pattern or a shorthand function call. The library supports three modes: css (default, uses CSS filters), canvas (uses canvas export base64), and auto (attempts css first, then falls back to canvas).

    import blurify from 'blurify';

// Using the constructor pattern
new blurify({
    images: document.querySelectorAll('.blurify'),
    blur: 6,
    mode: 'css',
});

// Using the shorthand pattern
blurify(6, document.querySelectorAll('.blurify'));

  3. How CSS and Canvas modes work

    master

    Blurify provides two distinct ways to apply blur effects:

    CSS Mode

    When mode is set to 'css' (or 'auto' on supported browsers), the library:

    1. Extracts the source URL from the image's data-src attribute or dataset.src.
    2. Applies a CSS filter: blur(Npx) directly to the element's style.

    Canvas Mode

    When mode is set to 'canvas' (or 'auto' on unsupported browsers), the library:

    1. Preloads the images.
    2. Creates an off-screen <canvas> for each image.
    3. Performs a manual blur operation on the canvas context.
    4. Replaces the image src with a blurred Data URL generated from the canvas.

  4. Configure blurify options

    master

    When initializing blurify, you can pass an options object with the following properties:

    • images { Element }: The target elements to be blurred.
    • blur { Int }: The extent of the blur effect (defaults to 6).
    • mode { String }: The method used for blurring:
      • css: Uses the CSS filter property (default).
      • canvas: Uses canvas export base64.
      • auto: Attempts css mode first, then automatically switches to canvas mode if necessary.

  5. Initialize blurify with options

    master

    The blurify function can be called as a constructor to apply a blur effect to one or more HTML images. You can pass an options object to configure the blur intensity, the rendering mode, and the target images.

    Options Object:

    • blur (number): The intensity of the blur effect. Defaults to 6.
    • mode (string): The rendering method. Options are:
      • 'auto': Automatically detects if the browser supports CSS filters. If supported, it uses css mode; otherwise, it falls back to canvas mode.
      • 'css': Uses CSS filter: blur(...). Note that when using css mode, the blur value is internally divided by 2.
      • 'canvas': Uses a canvas-based approach to generate a blurred Data URL for the image.
    • images (HTMLImageElement | HTMLImageElement[]): A single image element or an array of image elements to be blurred.
    • imageType (string, optional): Only used in canvas mode. Specifies the MIME type for the generated Data URL (e.g., image/jpeg). Defaults to image/jpeg.
    import blurify from 'blurify';

// Using the options object
new blurify({
    blur: 10,
    mode: 'auto',
    images: [imgElement1, imgElement2]
});

  6. Use the blurify shorthand syntax

    master

    For quick usage, blurify supports a shorthand syntax where you pass the blur amount as the first argument and the image(s) as the second argument.

    Syntax: blurify(blurAmount, images)

    This is equivalent to passing { blur: blurAmount, images: images, mode: 'auto' } to the options object.

    import blurify from 'blurify';

// Shorthand: blurify(blur, images)
blurify(10, [imgElement1, imgElement2]);