Obtain the dimensions of the pixel array stored as Uint8ClampedArray

Currently, I am utilizing TypeScript with Deno and attempting to incorporate blurhash.

Below is the snippet of code I am working with:

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,);

In this code, width and height are predetermined values. However, when executing, I encounter the following error message:

Width and height must match the pixels array

After consulting this issue, it appears that there might be an issue related to the alpha channel. Most of the proposed solutions involve using sharp in conjunction with ensureAlpha(). Unfortunately, since sharp does not run on Deno, I am unable to implement this solution.

If anyone has any insights on how to resolve this issue, I would greatly appreciate your assistance.

Answer №1

The library you are using for blurhash requires an Uint8Array containing raw bitmap pixels in the format [R, G, B, A]. Currently, you are supplying it with the entire PNG file, including headers, metadata, and compressed pixel data.

In order to access the raw bitmap data, you will need to read the image file directly. There are several libraries available for this task, so feel free to choose one that suits your needs. Unfortunately, Deno libraries require specific CSP rules which cannot be demonstrated here in StackSnippet's live demo feature.

import * as blurhash from "https://esm.sh/blurhash";
// Alternatively, use a different library
import decode from "https://deno.land/x/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3a4b2a0be8cbabeb2b4b68cb7b6b0bcb7b6a193a5e3fde3fde4">[email protected]</a>/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);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered: npm process ended unexpectedly with error code ELIFECYCLE and errno 2

Whenever I attempt to run - npm run dev in my command prompt, I encounter the following error: Insufficient number of arguments or no entry found. Alternatively, run 'webpack(-cli) --help' for usage info. Hash: af4cfdb00272137cb4d3 Version: web ...

Can type assertion/casting be incorporated within an object destructuring expression?

When it comes to utilizing Typescript, there is a more efficient way of accomplishing this task: const { mode, product, invalidFields } = useAdminProduct() as { mode: string, product: TYPES.PRODUCT, invalidFields: any }; By using object destructuring and ...

Create random animations with the click of a button using Vue.js

I have three different lottie player json animation files - congratulations1.json, congratulations2.json and congratulations3.json. Each animation file is configured as follows: congratulations1: <lottie-player v-if="showPlayer1" ...

What is the best method for extracting span text using selenium?

<p id="line1" class=""><span class="bot">Do you have a short-term memory?</span><span id="snipTextIcon" class="yellow" style="opacity: 1;"></span></p> I want to extract this text: Do you have a short-term memory? This ...

Determine the count of distinct elements within an array using Angular 7

Suppose I have an array containing the following objects: arr = [{name: 'foo', number: 1}, {name: 'foo', number: 1}, {name: 'bar', number: 1}] How can I determine the count of foo in this array without explicitly passing the ...

Ways to showcase product information (Using Angular and Firebase)

Information product.model.ts id?: string; name: string; price: number; sale_price: number; description: string; tech_sheet: string; imageUrls: string[]; category: string; createdAt: Date; } Initialize file product.service.ts The latest f ...

Tips for interacting with the DOM in an Angular 4 application

I am trying to call the addItems method, but I keep getting an error: Uncaught TypeError: this.addItems is not a function Currently, I am using Angular 4 along with jQuery and the fullpage.js library. page-content.component.ts import { Component, OnI ...

Finding Location Information Based on Latitude and Longitude Using Jquery

Does anyone know of a reliable solution or Jquery plugin that can provide location details based on latitude and longitude coordinates? I heard about the Google Reverse Location API but hoping for a pre-made option. I'm not sure if there are any free ...

Using the window.open() function to create various windows

As we are all aware, when clicking on a submit button that contains an onClick(windown.open(...)) command, a new window is opened with the specified attributes. However, if you proceed to click on the parent window and then click on the 'submit' ...

Angular's ng-model is unable to access the value of an object array

When selecting the days, users should be able to input check-in and check-out time ranges dynamically. However, there seems to be an issue with retrieving the values and data format. The ng model is unable to capture the check-in and check-out values. The ...

Stop :hovering on the link for iPad

My webpage contains sublinks with CSS properties as follows: #leftNav .searchBySub {...} #leftNav a.searchBySub:hover {...} #leftNav .searchBySubClicked {...} However, I have observed that on the iPad, the :hover styles are being applied. Is there a wa ...

What is preventing me from displaying the results on the webpage?

Currently, I am utilizing Express alongside SQLite and SQLite3 modules. However, upon running the server, the data fails to display on the initial request. It is only after a page refresh that the data finally appears. I attempted a potential solution by ...

An error was encountered with the Express generator when executing the command "SET DEBUG=myapp:* & npm start"

https://i.sstatic.net/9LEeV.png When I created an Express application using the command "npx express-generator --view=ejs myapp", everything seemed to be going smoothly. However, when it asked me to run two commands "npm install," one was successful but t ...

Interactive Data Visualization with D3 Version 6 Brush Chart

Looking for assistance in creating a brushable timeline or swim chart. Implementing the brushing functionality has been my main challenge, especially as a beginner with d3. Most of the examples I've come across seem to be outdated and not entirely app ...

Tips for anticipating a string that begins with a particular variable

One of the challenges I'm facing involves a simple function that creates a string from a complex object. To illustrate, consider the following implementation: public generateMessage(property: string): string { return `${property} more text.`; } ...

Clickable Angular Material card

I am looking to make a mat-card component clickable by adding a routerlink. Here is my current component structure: <mat-card class="card" > <mat-card-content> <mat-card-title> {{title}}</mat-card-title> &l ...

How can I locally include an ID in an HTML tag using Angular?

Hey there, I'm not facing any issue currently, but I have a question out of curiosity. Is it possible in Angular to locally add an ID to an HTML tag? I want this ID to be accessible only by the component that defines it. My intention is to set the ID ...

Retrieve the value of a selected element

I currently have an HTML select drop down that is populated by a JQuery get request. You can see this in action at this link. My goal is to access the specific piece of code for the selected value every time it changes. <small class="text-muted"> ...

Use an Angular array filter to return only values that match

In my dataset, each client is associated with a set of cases. I am looking to extract only those clients who have cases with the status "Open". Clients with cases marked as "Closed" should not be included in the filtered list. Currently, my filtering metho ...

Is it possible for me to use AJAX to load content from a string? I am attempting to postpone the activation of certain HTML

I need help optimizing my HTML page that includes certain sections with large Javascript files and images, which are initially hidden. Even when set to "display: none," the browser still loads all the content. One solution could be moving those sections in ...