# image-juggler

> Juggle pixel data between different web containers, like , , ImageData, File, ArrayBuffer, Blob, Array, etc.

Latest version **1.0.0** (published 2015-07-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install image-juggler
pnpm add image-juggler
yarn add image-juggler
bun add image-juggler
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2015-07-07 |
| First published | 2015-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Drew Petersen |
| Maintainers | kirbysayshi |
| Keywords | image, canvas, pixel, blob, file, arraybuffer |

## Links

- npm: https://www.npmjs.com/package/image-juggler
- Repository: https://github.com/kirbysayshi/image-juggler
- Homepage: https://github.com/kirbysayshi/image-juggler#readme
- Issues: https://github.com/kirbysayshi/image-juggler/issues
- npm.io page: https://npm.io/package/image-juggler

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2015-07-07

## README

image-juggler
=============

The web has some nice image-processing capabilities, but the APIs are wildly inconsistent. Plus, some third party libraries want a canvas, others want an image. And if you need to read an image in, you need to know the intimacies of the [File](https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications) and [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) APIs.

Usage
-----

Accept an image File via an `<input>` tag, and append it to the document as an Image.

```js
var jug = require('image-juggler');

var img = document.createElement('img');

var input = document.querySelector('input[type="file"]');
input.addEventListener('change', function(e) {
  e.stopPropagation();
  var file = e.target.files[0];

  if (!file) {
    throw new Error('No file or invalid file was selected');
  }

  jug.fileToImage(file, img, function(err, img) {
    document.body.appendChild(img);
  })
}, false)
```


API
---

Each of the functions follow the format of `function(input, opt_output, callback)`, where:

- `input`: the thing coming in...
- `opt_output`: if part of the signature, this element is used as the target container of the transform operation. For example, `imageToCanvas(image, opt_canvas, cb)` will use `opt_canvas`, but if none is passed in it will create a new `<canvas>` and supply it to the `callback`. Supplying an existing element can help to avoid GC. Some operations, due to the underlying implementation, require a new object to be created regardless (such as ArrayBuffers).
- `callback`: Always of the signature: `function(error, result)`, even if the underlying operation is not asynchronous. __NOTE: There is no guarantee that `callback` will be called asynchronously. Yes. This releases Zalgo.__

### imageToCanvas(image, opt_canvas, cb)

### imageToArrayBuffer(image, cb)

### imageDataToImage(imageData, opt_image, cb)

### fileToArrayBuffer(file, cb)

### fileToImage(file, opt_image, cb)

### canvasToImage(canvas, opt_image, cb)

### blobToImage(blob, opt_image, cb)

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