Blurash decode JS draw single line

[MaxPtdr]

Hello to all.

First of all, thank you for the work done on these bookstores.

I am currently testing the implementation of this one on a project. The encoding, although long in PHP went well but when it comes to decode it in JS, I get a single line and nothing else.

However, when I look at the state of the variables, they seem to be correct.

here is the portion of code for the decoding in JS :

`

import {decode } from "blurhash"

const pixels = decode("L5FY440001?a00~CJDoJ00S$?HH?",32,32);
console.log(pixels);
const canvas = document.createElement('canvas');
canvas.width = document.body.clientWidth;
canvas.height = 405;
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(1905,405);
imageData.data.set(pixels)
console.log(imageData);
ctx.putImageData(imageData,0,0)
document.body.append(canvas)
`

Thanks in advance !

[Thisen]

Please provide a sandboxed reproduction :)

[ConorKelleher]

For anyone still struggling with this, I also had this issue and I think it's just a case of misinterpreting vague directions in the TS readme. The decode guide here says to call "createImageData" with a height and width parameter, which aren't mentioned anywhere else. See:

const pixels = decode("LEHV6nWB2yk8pyo0adR*.7kCMdnj", 32, 32);

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(width, height); // <-- this is the problem
imageData.data.set(pixels);
ctx.putImageData(imageData, 0, 0);
document.body.append(canvas);

I incorrectly thought that these numbers would be the original image's dimensions (i.e. what size image should the canvas be substituting), but I've found that using the same height, width values as in the decode call (32 in this case), works as expected, and the <canvas> tag can just be sized through css to stretch to the desired dimensions. This is what's done on the demo at https://blurha.sh
By inspecting that demo, I can see the canvas is given height and width properties of 32 and has CSS to set the desired dimensions. Here's my working version, modified from the above guide:

const pixels = decode("LEHV6nWB2yk8pyo0adR*.7kCMdnj", 32, 32);

const canvas = document.createElement("canvas");
// have to set the canvas dimensions before drawing to ensure we're filling it before stretching
canvas.height = 32;
canvas.width = 32;
const imageData = ctx.createImageData(32, 32);
imageData.data.set(pixels);
ctx.putImageData(imageData, 0, 0);
document.body.append(canvas);

// Resize the canvas to whatever size suits your image/container
canvas.style.height = "2000px";
canvas.style.height = "3000px";

Seems like 32 is just an arbitrary quality value that lets you change how smooth the blur should be. I'm guessing 32 is just a nice midground that they found works well for their demo