uppy-blur-up
v1.2.1
Published
Generate data to create blur up effect when uploading through Uppy.
Downloads
12
Maintainers
Readme
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 imagewidth
andheight
: dimensions of original image from generated metadata (data.width
anddata.height
)applyAspectRatio
: this will enforce the original aspect ratio on the thumbnailplaceholder
: URL to placeholder from generated metadata (data.blur
)