# image-blobber

> A small module for reading HTML5 image file blobs.

Latest version **1.2.0** (published 2019-03-20) · MIT license · 0 weekly downloads

## Install

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

## 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 | 1.2.0 |
| Published | 2019-03-20 |
| First published | 2016-06-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Joshua Harms |
| Maintainers | nozzlegear |
| Keywords | fileblob, image blob, imageblob, base64, image, blob, file, html5, filereader |

## Links

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

## 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.2.0 (latest) — 2019-03-20
- 1.1.0 — 2016-06-16
- 1.0.1 — 2016-06-15
- 1.0.0 — 2016-06-15

## README

# image-blobber

A small module for reading image file base64/dimensions, and scaling them to a max height or width.

## Installation

image-blobber can be installed from [npm](https://npmjs.com/package/image-blobber).

```bash
npm install --save image-blobber
```

```js
//ES6
import * as imageblobber from "image-blobber";

//Node-style require
const imageblobber = require("image-blobber");
```

## Usage

All image-blobber functions are promisified.

### Supported: boolean

An exported boolean that indicates whether the current environment supports the [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) needed by the `getFileBlobs` function. If `false`, `getFileBlobs` will throw an error. 

```ts
import {Supported} from "image-blobber";

if (!Supported)
{
    throw new Error("Your browser does not support the FileReader API.");
}
```

### getFileBlobs(input: HtmlInputElement): Promise\<File[]\>

Gets all file blobs for an HTML5 file input element.

```ts
import {getFileBlobs} from "image-blobber";

const input = document.getElementById("my-file-input");

getFileBlobs(input).then((blobs) =>
{
    console.log(blobs.length); // 3
});
```

### getBase64(file: File): Promise\<BlobDetails\>

Gets the base64 string, filename and dimensions for the given image file. See [below](#interfaces) for the `BlobDetails` interface.

```ts
import {getBase64} from "image-blobber";

const file: File = ...;

getBase64(file).then((details) =>
{
    console.log(details.filename);   // "my-file.png"
    console.log(details.base64);     // "data:image/png;base64,..."
    console.log(details.dimensions); // { height: 150, width: 75 }
});
```

### scaleBase64(base64: string, options: ScaleOptions): Promise\<ScaleResult\>

Scales a base64 image string according to the options passed in. See [below](#interfaces) for the `ScaleOptions` and `ScaleResult` interfaces.

```ts
import {scaleBase64} from "image-blobber";

const base64: string = ...;

scaleBase64(base64, {height: 400, width: 400, preserveRatio: true}).then((scaledImage) =>
{
    console.log(scaledImage.scaledBase64);     // "data:image/png;base64,..."
    console.log(scaledImage.scaledDimensions); // { height: 150, width: 75 }
});
```

### Tie it all together

```ts
import * as Promise from "bluebird";
import * as blobber from "file-blobber";

const input = document.querySelector("input") as HTMLInputElement;

blobber.getFileBlobs(input)
    .then((blobs) =>
    {
        return Promise.all(blobs.map(blob => blobber.getBase64(blob)));
    })
    .then((images) =>
    {
        return Promise.all(images.map(i => blobber.scaleBase64(i.base64, {height: 400, width: 400, preserveRatio: true})));
    })
    .then((scaledImages) =>
    {
        // Do something with the scaled images.
    })
```

## Interfaces

The following interfaces are used or returned at some point by image-blobber. If you're using Typescript, the compiler should automatically pick up these definitions when image-blobber is installed.

### Dimensions

| Property | Type | Comments |
| -------- | ---- | -------- |
| height | number | The image's height. |
| width  | number | The image's width. |

### BlobDetails

| Property | Type | Comments |
| -------- | ---- | -------- |
| filename | string | The name of the file as it appears on the user's machine. |
| base64 | string | A base64 string representing the image. Can be set as an `<img />` element's `src`. |
| dimensions | [Dimensions](#dimensions) | The image's height and width dimensions. |

### ScaleResult

| Property | Type | Comments |
| -------- | ---- | -------- |
| scaledBase64 | string | A base64 string representing the scaled image. Can be set as an `<img />` element's `src`. |
| scaledDimensions | [Dimensions](#dimensions) | The scaled image's new height and width dimensions. |

### ScaleOptions

| Property | Type | Comments |
| -------- | ---- | -------- |
| height | number | The maximum height allowed for a scaled image. Optional, but options must include either a height or width. |
| width | number | The maximum width allowed for a scaled image. Optional, but options must include either a height or width. |
| preserveRatio | boolean | Whether aspect ratio should be preserved. If true, image will be scaled to an aspect ratio that satisfies both `height` and `width`. Default true. |

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