uppy-blur-up

    1.2.1 • Public • Published

    uppy-blur-up

    Uppy plugin that generates data to create the “blur up” technique popularized by Medium and Facebook where a small 20px wide version of the image is shown as a placeholder until the actual image is downloaded.

    The relevant data is added to the file's metadata.

    This plugin is not part of Uppy but inherits a lot from @uppy/thumbnail-generator. The original idea is inspired from gatsby-remark-image.

    It is currently maintained by Arthur Puyou with support from Fotokorner.

    Installation

    $ npm install uppy-blur-up --save

    Example

    const Uppy = require('@uppy/core');
    const BlurUp = require('uppy-blur-up');
     
    const uppy = Uppy();
    uppy.use(BlurUp);
     
    uppy.on('blurup:generated', (file, data) => {
      console.log(`Blurup data generated for ${file.id}`, data);
    });

    To display the image, I recommend the react-simple-image component with the following props :

    • src: path to full size image
    • width and height: dimensions of original image from generated metadata (data.width and data.height)
    • applyAspectRatio: this will enforce the original aspect ratio on the thumbnail
    • placeholder: URL to placeholder from generated metadata (data.blur)

    License

    The MIT License.

    Install

    npm i uppy-blur-up

    DownloadsWeekly Downloads

    1

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    11.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • apuyou