Skip to content

larscom/image-data

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@larscom/image-data

npm-version npm license

Easily construct an Image object from a URL or ArrayBuffer. An Image object contains the width and height of the image and an ImageData object as well as the channels (RGBA). It uses WASM to construct such an object.

Installation

npm install @larscom/image-data

Usage

Import the load_from_url function to construct an Image object.

import { load_from_url } from '@larscom/image-data'

const imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png'

const image = await load_from_url(imageUrl)

const canvas = document.getElementById('canvas')

canvas.width = image.width
canvas.height = image.height

const ctx = canvas.getContext('2d')

// use the ImageData object
ctx.putImageData(image.data, 0, 0)
interface Image {
  width: number
  height: number
  data: ImageData
  // RGBA
  channels: Uint8Array<ArrayBuffer>
}

Vite

When using a build tool such as vite you need additional configuration as it doesn't serve *.wasm files by default (see examples folder for a vite-react-ts project)

add exclude option to optimizeDeps to vite.config.ts

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['@larscom/image-data']
  }
})

Colors (HEX)

Convert each individual pixel to a HEX color code.

import { load_from_url, convert_to_hex_colors } from '@larscom/image-data'

const imageUrl = 'https://example.com/image.png'
const image = await load_from_url(imageUrl)

const colors = convert_to_hex_colors(image.channels)

console.log(colors) // ["#FF5733", "#33C1FF", "#28A745", ...]

Colors (RGBA)

Decode the raw channel data into an array of pixels (RGBA)

import { load_from_url, decode_to_rgba } from '@larscom/image-data'

const imageUrl = 'https://example.com/image.png'
const image = await load_from_url(imageUrl)

const pixels = decode_to_rgba(image.channels)

console.log(pixels)
// [
//  { r: 255, g: 0,   b: 0,   a: 255 },
//  { r: 0,   g: 255, b: 0,   a: 128 },
//  { r: 0,   g: 0,   b: 255, a: 64  },
//  ...
// ]

Supported formats

Format Supported
JPEG
PNG
BMP
DDS
FARBFELD
GIF
HDR
ICO
EXR
PNM
QOI
TGA
TIFF
WEBP
AVIF
SVG

About

Create ImageData object from URL or ArrayBuffer without creating a canvas (using wasm)

Topics

Resources

License

Stars

Watchers

Forks

Contributors 2

  •  
  •