Get width/height of pixels array in Uint8ClampedArray

Question

I am using TypeScript on Deno. I am trying to use blurhash.

This is my code:

const response = await fetch(url);
if (!response.body) {
throw new Error("Body null");
}

const clamped = new Uint8ClampedArray(await response.arrayBuffer());
var blurhash: string = encode(clamped, width, height, 4, 4,);

where width and height is known beforehand. But I get this error:

Width and height must match the pixels array

I read this issue and it seems like the alpha channel is missing or something. The problem is, that all solutions are fixing it by using sharp with ensureAlpha(). But sharp is not running on Deno, so I can't use it.

Does anyone know how I could fix this?

according to sharp documentation ... It can be used with all JavaScript runtimes that provide support for Node-API v9, including Node.js (^18.17.0 or >= 20.3.0), Deno and Bun. - perhaps you're doing it wrong — Jaromanda X
– Jaromanda X, Commented Mar 13, 2024 at 10:57
@JaromandaX Mhh okay. For me it is not working. I am just getting a segmentation fault. But I am in a supabase environment. Maybe that is causing issues. — progNewbie
– progNewbie, Commented Mar 13, 2024 at 11:23
You might find this to be a useful read: Efficiently update a canvas with RGB or grayscale data (but not RGBA) — jsejcksn
– jsejcksn, Commented Mar 13, 2024 at 12:31

2 revs · Accepted Answer · 2024-03-19 10:27:28Z

4

+50

The blurhash library you are using expects an Uint8Array of raw bitmap pixels in the format [R, G, B, A]. Here you are feeding it the whole png file, with its headers, its metadata and the pixel data compressed in it.

You will need to actually read that image file in order to gain access to this raw bitmap data. There are various libraries that do that, I'll let you pick one, but unfortunately deno ones require CSP rules that we don't have here in StackSnippet so I can 't make a live demo.

import * as blurhash from "https://esm.sh/blurhash";
// Or any other library
import decode from "https://deno.land/x/[email protected]/mod.js";

const response = await fetch(url);
if (!response.body) {
  throw new Error("Body null");
}
const fileBuffer = await response.arrayBuffer();
const { data, width, height } = await decode(fileBuffer);
const hash = encode(data, width, height, 4, 4,);
console.log(hash);

edited Mar 19, 2024 at 10:27

community wiki

2 revs
Kaiido

Sign up to request clarification or add additional context in comments.

6 Comments

progNewbie Over a year ago

I get Property 'buffer' does not exist on type 'Response'.. Do you mean arrayBuffer()?

Kaiido Over a year ago

@progNewbie yes that was a typo

progNewbie Over a year ago

Somehow I get Uncaught SyntaxError: The requested module 'wasmImageDecoder' does not provide an export named 'decode' after importing it like import { decode } from "wasmImageDecoder" with my import_map entry "wasmImageDecoder": "https://deno.land/x/[email protected]/mod.js"

progNewbie Over a year ago

I made it work by using another lib. thank you!

progNewbie Over a year ago

@Eugene is this sarcasm? You can just ask for it. I used https://deno.land/x/[email protected]/mod.ts

|

Collectives™ on Stack Overflow

Get width/height of pixels array in Uint8ClampedArray

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related