# @timzhong2000/browser-image-helper

> a library for image format transform on browser

Latest version **0.3.2** (published 2022-10-11) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @timzhong2000/browser-image-helper
pnpm add @timzhong2000/browser-image-helper
yarn add @timzhong2000/browser-image-helper
bun add @timzhong2000/browser-image-helper
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2022-10-11 |
| First published | 2022-10-11 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tim-Zhong-2000 |
| Maintainers | timzhong2000 |

## Links

- npm: https://www.npmjs.com/package/@timzhong2000/browser-image-helper
- npm.io page: https://npm.io/package/@timzhong2000/browser-image-helper

## Recent versions

- 0.3.2 (latest) — 2022-10-11
- 0.3.1 — 2022-10-11
- 0.2.2 — 2022-10-11
- 0.2.1 — 2022-10-11
- 0.1.1 — 2022-10-11
- 0.0.2 — 2022-10-11
- 0.0.1 — 2022-10-11

## README

# browser-image-helper

A library for image format transform on browser

## Overview

### Supported Input Format

- HTMLImageElement
- SVGImageElement
- HTMLVideoElement
- HTMLCanvasElement
- ImageBitmap
- Blob
- ImageData
- File

### Supported Output Format

- ImageBitmap
- Blob
- ImageData
- File

## Getting Started

```bash
npm install @timzhong2000/browser-image-helper
# or
pnpm install @timzhong2000/browser-image-helper

```

normal use (immutable image)

```ts
import { ImageHelper } from "@timzhong2000/browser-image-helper";

const imageHelper = new ImageHelper(await fetchBlob());

// to ImageBitmap
const imageBitmap = await imageHelper.toImageBitmap();

// to ImageData
const imageData = await imageHelper.toImageData();

// select an area
const imageDataWithCutArea = await imageHelper.toImageData(0, 0, 1920, 1080);
```

for performance (mutable image)

```ts
import { ImageHelper } from "@timzhong2000/browser-image-helper";

const imageHelper = new ImageHelper(undefined, true);

// to ImageData (first time SLOW!)
imageHelper.setImage(await fetchBlob());
const imageData1 = await imageHelper.toImageBitmap();

// to ImageData (second time with zero-copy SUPER FAST!)
imageHelper.setImage(await fetchAnotherBlob());
const imageData2 = await imageHelper.toImageBitmap();
// ...
```

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