https://github.com/whiletruu/elm-blurhash

Blurhash decoding and encoding in Elm
https://github.com/whiletruu/elm-blurhash

blurhash elm elm-lang

Last synced: 8 months ago
JSON representation

Blurhash decoding and encoding in Elm

• Host: GitHub
• URL: https://github.com/whiletruu/elm-blurhash
• Owner: WhileTruu
• License: bsd-3-clause
• Created: 2019-10-28T19:23:25.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-03-02T20:08:04.000Z (almost 6 years ago)
• Last Synced: 2025-03-24T06:54:37.885Z (9 months ago)
• Topics: blurhash, elm, elm-lang
• Language: Elm
• Homepage:
• Size: 45.9 KB
• Stars: 14
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# BlurHash

Display blurhash in elm. Blurhash is ["A very compact representation of a placeholder for an image"](https://blurha.sh/).

The hash is sent as a small string (for example in a json payload) and can be loaded more quickly than a large image file.

![the blurhash process](https://github.com/woltapp/blurhash/raw/master/Media/HowItWorks1.jpg)

This package turns the blurhash string into an image, which can be loaded into a document as a base64-encoded uri.

```elm

import BlurHash

import Html exposing (Html)

import Html.Attributes

main : Html msg

main =

    let

        uri =

            BlurHash.toUri { width = 30, height = 30 }

                1.0

                "UBL_:rOpGG-oBUNG,qRj2so|=eE1w^n4S5NH"

    in

    Html.img

        [ Html.Attributes.style "width" "400px"

        , Html.Attributes.src uri

        ]

        []

```

An encoder is also included!

## Demo

[Webpage](https://whiletruu.github.io/elm-blurhash/)

[Code](https://github.com/WhileTruu/elm-blurhash/tree/publish-package/example)