get-image-data

A simple JS library to get ImageData.

npm i @alttiri/get-image-data

• In Node.js use getImageDataWithSharp to get ImageData with sharp library.

  Do not forget to install sharp (npm i sharp). Since sharp is not included as a dependency (This allows you to install the version of sharp you need).

• For browsers just use getImageDataWithCanvas.

  It uses OffscreenCanvas to get the ImageData for File/Blob input.

  You can get File from the HTML input element, and Blob from fetch response.

Node.js examples

npm i @alttiri/get-image-data sharp

An image path (string) as input:

import {getImageDataWithSharp as getImageData} from "@alttiri/get-image-data";

const imagePath = "C:/Windows/IdentityCRL/WLive48x48.png";
const imageData = await getImageData(imagePath);
console.log(imageData);

Or ArrayBufferLike/ArrayBufferView:

import {getImageDataWithSharp as getImageData} from "@alttiri/get-image-data";
import fs from "node:fs/promises";

const imagePath = "C:/Windows/IdentityCRL/WLive48x48.png";
const fileBuffer = await fs.readFile(imagePath);
const imageData = await getImageData(fileBuffer);
console.log(imageData);

The result:

{
  width: 48,
  height: 48,
  data: Uint8ClampedArray(9216) [255, 255, 255, 0, ...],
  colorSpace: "srgb"
}

Web examples

npm i @alttiri/get-image-data

File from HTMLInputElement:

import {getImageDataWithCanvas as getImageData} from "@alttiri/get-image-data";

const input = document.querySelector(`input[type="file"]`);
input.onchange = async function() {
  const file = input.files[0];
  const imageData = await getImageData(file);
  console.log(imageData);
}

Blob from fetch response:

import {getImageDataWithCanvas as getImageData} from "@alttiri/get-image-data";

const imageUrl = "https://i.imgur.com/DR94LKg.jpeg";
const resp = await fetch(imageUrl);
const blob = await resp.blob();
const imageData = await getImageData(blob);
console.log(imageData);