Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including image-pixels with all npm packages installed. Try it out:

var imagePixels = require("image-pixels")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

image-pixels v2.2.2

Read pixel data from any image source

image-pixels Build Status unstable

Get pixel data for a given URL, path, buffer, canvas, image or any other source. Intented for image based tests, first of all.

Usage

$ npm install image-pixels

var pixels = require('image-pixels')

// load single source
var {data, width, height} = await pixels('lena.png')

// load multiple sources in parallel
var [a, b, c] = await pixels.all([
    './a.jpg',
    { source: './b.png', cache: false },
    canvas
])

API

let {data, width, height} = await pixels(source, options?, cb?)

Loads pixel data from a source based on options. Possibly provide a callback for old-style async calls. Function returns a promise that gets resolved once the source is ready, so that is handy for await call.

In browser the result is ImageData object to easily output to context:

document.body.appendChild(document.createElement('canvas'))
    .getContext('2d')
    .putImageData(await pixels('lena.png'))

source

TypeMeaning
url, pathRelative/absolute path.
data-uri, base64String with encoded or raw pixel data. Raw data requires options.shape. Encoded data may require options.type to skip mime type detection.
HTMLImageElement, SVGImageElement, HTMLVideoElement, CSSImageValueDOM/SVG image elements.
Image, ImageData, ImageBitmapBrowser image data containers.
File, BlobEncoded image data.
Canvas, Context2D2D drawing context, browser-only.
WebGLContextGL context, node/browser.
Buffer, ArrayBuffer, Uint8Array, Uint8ClampedArrayRaw or encoded pixel data. Raw data requires options.shape. For encoded data options.typeskips mime type detection. Supported formats: png, bmp, gif, jpg.
Float32Array, Float64Array, Array, Array of arraysFloat pixel data with values from 0..1 range.
PromisePromise expecting resolution to an image source.
ndarrayNdarray container with pixel data, compatible with get-pixels.
options objectIf source argument is omitted, it is taken from options.source, useful for pixels.all.

options

OptionMeaning
sourceSource data, one from the list above. Applicable for multiple sources.
shape or width/heightInput raw data shape [width, height].
type/mimeMime type, optional for raw data to skip detection.
clipClipping rectangle, [left, top, right, bottom] or {x?, y?, width?, height?}.
cacheCache loaded data for the source/url for faster subsequent fetch.

let list|dict = await pixels.all(list|dict, options?)

Load multiple sources or dict of sources in parallel. options can provide common for every source options.

// load font atlas sprite dict
var atlas = require('font-atlas')({chars: 'abc', step: [10, 10], shape: [20, 20]})

var dict = await pixels({
    a: {clip: [0,0,10,10]},
    b: {clip: [10,0,10,10]},
    c: {clip: [0,10,10,10]}
}, {cache: true, source: atlas})

Related packages

  • image-save − save image/pixel data to a file, canvas or array.
  • image-equal − assert image with baseline.

Similar packages

  • get-pixels − get ndarray with pixel data, limited set of sources.
  • ndarray-from-image − get-pixels with dtype.
  • get-image-pixels − get pixel data for Canvas/Image/Video elements, browser-only.
  • get-image-data − get image data for Canvas/Image/Video elements, browser-only.
  • readimage − read pixels data into an array in sync fashion in node.

License

© 2018 Dmitry Yv. MIT License.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free