Git Product home page Git Product logo

ndarray-pixels's Introduction

ndarray-pixels

Latest NPM release License npm bundle size CI

Convert ndarray ↔ image data, on Web and Node.js.

Designed to be used with other ndarray-based packages.

Supported Formats

Platform JPEG PNG Other
Node.js Based on sharp support
Web Based on browser support

Known Bugs

  • Web implementation (Canvas 2D) premultiplies alpha.

Quickstart

npm install --save ndarray-pixels

Web

import { getPixels, savePixels } from 'ndarray-pixels';

const bytesIn = await fetch('./input.png')
    .then((res) => res.arrayBuffer())
    .then((arrayBuffer) => new Uint8Array(arrayBuffer));

// read
const pixels = await getPixels(bytesIn, 'image/png'); // Uint8Array -> ndarray

// modify
for (let i = 0; i < pixels.shape[0]; ++i) {
  for (let j = 0; j < pixels.shape[1]; ++j) {
    pixels.set(i, j, 255);
  }
}

// write
const bytesOut = await savePixels(pixels, 'image/png'); // ndarray -> Uint8Array

Node.js

const fs = require('fs');
const { getPixels, savePixels } = require('ndarray-pixels');

const bufferIn = fs.readFileSync('./input.png');

// read
const pixels = await getPixels(bufferIn, 'image/png'); // Uint8Array -> ndarray

// modify
for (let i = 0; i < pixels.shape[0]; ++i) {
  for (let j = 0; j < pixels.shape[1]; ++j) {
    pixels.set(i, j, 255);
  }
}

// write
const bufferOut = await savePixels(pixels, 'image/png'); // ndarray -> Uint8Array
fs.writeFileSync('./output.png', bufferOut);

API

getPixels

getPixels(data, mimeType): Promise<NdArray<Uint8Array>>

Decodes image data to an ndarray.

MIME type is optional when given a path or URL, and required when given a Uint8Array.

Accepts image/png or image/jpeg in Node.js, and additional formats on browsers with the necessary support in Canvas 2D.

Parameters

Name Type Description
data Uint8Array
mimeType string image/jpeg, image/png, etc.

Returns

Promise<NdArray<Uint8Array>>

Defined in

index.ts:17


savePixels

savePixels(pixels, mimeType): Promise<Uint8Array>

Encodes an ndarray as image data in the given format.

If the source ndarray was constructed manually with default stride, use ndarray.transpose(1, 0) to reshape it and ensure an identical result from getPixels(). For an ndarray created by getPixels(), this isn't necessary.

Accepts image/png or image/jpeg in Node.js, and additional formats on browsers with the necessary support in Canvas 2D.

Parameters

Name Type Description
pixels NdArray<Uint8Array | Uint8ClampedArray> ndarray of shape W x H x 4.
mimeType string image/jpeg, image/png, etc.

Returns

Promise<Uint8Array>

Defined in

index.ts:35

ndarray-pixels's People

Contributors

renovate-bot avatar renovate[bot] avatar donmccurdy avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.