BlurHash Placeholder

<div class="blurhash-container">
  <canvas id="placeholder" width="32" height="24"></canvas>
  <img src="foto.jpg" onload="this.style.opacity=1" style="opacity:0;transition:opacity .3s" />
</div>
<style>
.blurhash-container { position: relative; }
.blurhash-container img { position: absolute; inset: 0; width: 100%; height: 100%; }
</style>
<script type="module">
import { decode } from "blurhash";
const ctx = document.getElementById("placeholder").getContext("2d");
const img = ctx.createImageData(32, 24);
img.data.set(decode("LEHV6nWB2yk8pyo0adR*.7kCMdnj", 32, 24));
ctx.putImageData(img, 0, 0);
</script>

import { Blurhash } from "react-blurhash";

<Blurhash
  hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
  width={256}
  height={192}
  resolutionX={32}
  resolutionY={24}
  punch={1}
/>;