# @canvas/image

> An `Image` implementation for usage outside of the browser.

Latest version **2.0.0** (published 2023-07-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @canvas/image
pnpm add @canvas/image
yarn add @canvas/image
bun add @canvas/image
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-07-26 |
| First published | 2019-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=10 |
| Dependencies | 11 |
| Unpacked size | 12.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Maintainers | linusu |

## Links

- npm: https://www.npmjs.com/package/@canvas/image
- Repository: https://github.com/node-gfx/image
- Homepage: https://github.com/node-gfx/image#readme
- Issues: https://github.com/node-gfx/image/issues
- npm.io page: https://npm.io/package/@canvas/image

## Dependencies (11)

- [decode-ico](https://npm.io/package/decode-ico.md) ^0.4.1
- [simple-get](https://npm.io/package/simple-get.md) ^4.0.1
- [@cwasm/webp](https://npm.io/package/@cwasm/webp.md) ^0.1.3
- [@cwasm/nsbmp](https://npm.io/package/@cwasm/nsbmp.md) ^0.1.0
- [@cwasm/nsgif](https://npm.io/package/@cwasm/nsgif.md) ^0.1.0
- [@cwasm/lodepng](https://npm.io/package/@cwasm/lodepng.md) ^0.1.2
- [@cwasm/jpeg-turbo](https://npm.io/package/@cwasm/jpeg-turbo.md) ^0.1.1
- [@canvas/image-data](https://npm.io/package/@canvas/image-data.md) ^1.0.0
- [fast-base64-decode](https://npm.io/package/fast-base64-decode.md) ^1.0.0
- [fast-base64-encode](https://npm.io/package/fast-base64-encode.md) ^1.0.0
- [fast-base64-length](https://npm.io/package/fast-base64-length.md) ^1.0.0

## Recent versions

- 2.0.0 (latest) — 2023-07-26
- 1.0.1 — 2020-03-25
- 1.0.0 — 2019-11-24

## README

# Image

An `Image` implementation for usage outside of the browser.

Also exports some helper methods which are available both in Node.js, and in the browser when packaging with Browserify, Webpack, etc.

## Installation

```sh
npm install --save @canvas/image
```

## Usage

```js
const fs = require('fs')
const { Image, getImageData, imageFromBuffer, imageFromImageData } = require('@canvas/image')

// Traditional loading
const img = new Image()
img.src = 'image.png'
img.onload = () => {
  console.log(img.width)
  // => 2

  console.log(img.height)
  // => 1

  console.log(getImageData(img).data)
  // => Uint8ClampedArray [ 1, 2, 3, 4, 5, 6, 7, 8 ]
}

// From Buffer
const source = fs.readFileSync('image.png')
imageFromBuffer(source).then((img) => {
  console.log(img.width)
  // => 2

  console.log(img.height)
  // => 1

  console.log(getImageData(img).data)
  // => Uint8ClampedArray [ 1, 2, 3, 4, 5, 6, 7, 8 ]
})

// From ImageData
const data = new ImageData(new Uint8ClampedArray([1, 2, 3, 4, 5, 6, 7, 8]), 2, 1)
imageFromImageData(data).then((img) => {
  console.log(img.width)
  // => 2

  console.log(img.height)
  // => 1

  console.log(getImageData(img).data)
  // => Uint8ClampedArray [ 1, 2, 3, 4, 5, 6, 7, 8 ]
})
```

## API

### `getImageData(image)`

- `image` ([`Image`](https://developer.mozilla.org/en-US/docs/Web/API/Image), required)
- returns [`ImageData`](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) or `undefined`

### `imageFromBuffer(buffer)`

- `buffer` ([`Uint8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array), required)
- returns `Promise<Image>`

### `imageFromImageData(imageData)`

- `imageData` ([`ImageData`](https://developer.mozilla.org/en-US/docs/Web/API/ImageData), required)
- returns `Promise<Image>`

## Hacking

The tests are made to be run against both this implementation and Chrome's implementation to make sure that we behave in the same way. You can run the tests in Chrome by building the test bundle (`npm run build`), spinning up a local web server, and then opening `test.html`.

---
_Source: https://npm.io/package/@canvas/image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._