https://github.com/semibran/img-data

Easily read from and write to ImageData instances
https://github.com/semibran/img-data

canvas data image img

Last synced: 15 days ago
JSON representation

Easily read from and write to ImageData instances

• Host: GitHub
• URL: https://github.com/semibran/img-data
• Owner: semibran
• License: mit
• Created: 2017-06-06T04:48:55.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-06-06T04:49:12.000Z (over 7 years ago)
• Last Synced: 2024-10-20T14:05:46.610Z (27 days ago)
• Topics: canvas, data, image, img
• Language: JavaScript
• Size: 1.95 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# img-data

> Easily read from and write to [`ImageData`](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) instances

## install

```sh

npm install img-data

```

## usage

This example takes a `` element from the DOM and fills it with the color of the top-left pixel.

```js

const { get, set } = require('img-data')

var canvas = document.getElementById('canvas')

var context = canvas.getContext('2d')

var data = context.getImageData(0, 0, canvas.width, canvas.height)

var color = get(data, { x: 0, y: 0 })

for (var y = 0; y < canvas.height; y++) {

  for (var x = 0; x < canvas.width; x++) {

    set(data, { x, y }, color)

  }

}

context.putImageData(data, 0, 0)

```

### `color = get(image, position)`

Retrieves the `color` (`[red, green, blue, alpha]`) of the pixel found at the given `position` on `image`.

- `image`: The `ImageData` instance to read from

- `position`: The position (`{ x, y }`) denoting the location of the desired pixel

`get` will return `undefined` if `position` is out of bounds.

### `set(image, position, color)`

Replaces the color of the pixel found at the given `position` on `image` with `color`.

- `image`: The `ImageData` instance to write to

- `position`: The position (`{ x, y }`) denoting the location of the desired pixel

- `color`: The color (`[red, green, blue, alpha]`) to use in the replacement process

`set` will fail silently if `position` is out of bounds.

## license

[MIT](https://opensource.org/licenses/MIT) © [Brandon Semilla](https://git.io/semibran)