A step (Storehouse.Analyzer) that makes a photograph's
ThumbHash (Storehouse.Image.ThumbHash),
under "thumbhash": about 25 bytes, kept with the file, that a page
decodes into a blur of its colours, proportions and transparency.
"thumbhash"- its bytes, in Base64."color"- its average colour,#rrggbb."width"and"height"- of the image it was made from, at most 100 each: its proportions.
# mix.exs: libvips, through Vix.
{:vix, "~> 0.31"}
Storehouse.store(upload.path, analyze: [Storehouse.Analyzer.ThumbHash])In the page, with thumbhash from npm:
import { thumbHashToDataURL } from "thumbhash"
const bytes = Uint8Array.from(atob(file.analysis.thumbhash.thumbhash), (c) => c.charCodeAt(0))
img.style.background = `center / cover url(${thumbHashToDataURL(bytes)})`Smaller than Storehouse.Analyzer.Placeholder's image, which needs no
script to show; larger than Storehouse.Analyzer.BlurHash's string,
and truer to the photograph's colours, with its transparency. Made as
the image loads, at most 100 pixels a side, never decoded whole; a file
libvips does not read fails the step, with why. Not an image is
skipped.
Options
:background-"#rrggbb": transparency laid on it, and kept out of the hash. The default keeps it.