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.
npm install @larscom/image-data
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>
}
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 tooptimizeDeps
tovite.config.ts
export default defineConfig({
plugins: [react()],
optimizeDeps: {
exclude: ['@larscom/image-data']
}
})
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", ...]
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 },
// ...
// ]
Format | Supported |
---|---|
JPEG | ✅ |
PNG | ✅ |
BMP | ✅ |
DDS | ✅ |
FARBFELD | ✅ |
GIF | ✅ |
HDR | ✅ |
ICO | ✅ |
EXR | ✅ |
PNM | ✅ |
QOI | ✅ |
TGA | ✅ |
TIFF | ✅ |
WEBP | ✅ |
AVIF | ❌ |
SVG | ❌ |