# `Storehouse.Analyzer.BlurHash`
[🔗](https://github.com/hattoriai/storehouse/blob/v0.2.0/lib/storehouse/analyzer/blur_hash.ex#L2)

A step (`Storehouse.Analyzer`) that makes a photograph's
[BlurHash](https://blurha.sh) (`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.

```elixir
# 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`):

```js
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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*