A step (Storehouse.Analyzer) that makes a photograph's
BlurHash (Storehouse.Image.BlurHash), under
"blurhash": a string of 20 to 30 characters, kept with the file, that
a page decodes into a blur.
"blurhash"- the string."color"- its average colour,#rrggbb."width"and"height"- of the image it was made from: its proportions, to decode it at.
# mix.exs: libvips, through Vix.
{:vix, "~> 0.31"}
Storehouse.store(upload.path, analyze: [Storehouse.Analyzer.BlurHash])In the page, with blurhash from npm (or a component of it:
react-blurhash, vue-blurhash):
import { decode } from "blurhash"
const { blurhash, width, height } = file.analysis.blurhash
const pixels = decode(blurhash, width, height)The shortest of the three placeholders, and the one most services
know; Storehouse.Analyzer.ThumbHash is truer to colours and keeps
transparency, Storehouse.Analyzer.Placeholder needs no script. Made
as the image loads, never decoded whole; a file libvips does not read
fails the step, with why. Not an image is skipped.
Options
:components-{x, y}, 1 to 9 each: more is more detail, and a longer string. The default is{4, 3}.:size- the longest edge it is made from, in pixels. The default is 32: the hash keeps little detail, and more pixels take longer.:background-"#rrggbb", under transparency, which a BlurHash does not keep. The default is white.