blurhash decoding modifier for ember, allow decode blurhash images and use it as css-variable
ember install ember-blurhash
<style>
.blurhash {
background-image: url(/heavy-image.png), var(--blurhash-image);
min-width: 640px;
min-height: 480px;
background-size: cover;
background-repeat: no-repeat;
}
.b-picture {
background-image: var(--blurhash-image);
min-width: 640px;
min-height: 480px;
background-size: cover;
background-repeat: no-repeat;
}
</style>
<div class="blurhash" {{blurhash-decoder 'LEHV6nWB2yk8pyo0adR*.7kCMdnj' 640 480 1}}></div>
<img src="/heavy-image.png" class="b-picture" {{blurhash-decoder 'LEHV6nWB2yk8pyo0adR*.7kCMdnj' 640 480}}>
Positional params:
1.) hash (string)
2.) width (int) = 320
3.) height (int) = 240
4.) punch (int) (~contrast) of the blurhash decoding algorithm = 1
5.) rendered image width (int) = width = 320
6.) rendered image height (int) = height = 240
Additional hash params:
q = 0.85 // quality
f = "image/jpeg" // format
p = "--blurhash-image" // css variable name
bg = true // apply as backgound-image instead of css-variable
See the Contributing guide for details.
This project is licensed under the MIT License.