# save-image-as

> Convert and resize any image to another format in browser.

Latest version **0.4.2** (published 2021-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install save-image-as
pnpm add save-image-as
yarn add save-image-as
bun add save-image-as
```

## Health

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

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

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.2 |
| Published | 2021-02-01 |
| First published | 2020-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 121.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Emre Sakarya |
| Maintainers | npmre |
| Keywords | convert image, reformat image, resize image, Browser |

## Links

- npm: https://www.npmjs.com/package/save-image-as
- Repository: https://github.com/softberry/save-image-as
- Issues: https://github.com/softberry/save-image-as/issues
- npm.io page: https://npm.io/package/save-image-as

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.4.2 (latest) — 2021-02-01
- 0.4.1 — 2021-01-30
- 0.4.0 — 2021-01-13
- 0.3.0 — 2021-01-01
- 0.2.5 — 2021-01-01
- 0.2.4 — 2020-12-28
- 0.2.3 — 2020-12-27
- 0.2.2 — 2020-12-26
- 0.2.1 — 2020-12-25
- 0.2.0 — 2020-12-25
- 0.1.0 — 2020-12-22
- 0.0.32 — 2020-12-21
- 0.0.31 — 2020-12-21
- 0.0.30 — 2020-12-21
- 0.0.29 — 2020-12-21
- … 28 more at https://npm.io/package/save-image-as/versions

## README

# Save Image As:

![Travis (.com) branch](https://img.shields.io/travis/com/softberry/save-image-as/master?style=for-the-badge)
![npm](https://img.shields.io/npm/v/save-image-as?style=for-the-badge)
![NPM](https://img.shields.io/npm/l/save-image-as?style=for-the-badge)

Convert any image file using html input element to `JPG` , `PNG` or `WEBP` in browser to optionally to Base64, Buffer or Binary format.

## How To Use

Get this package from npm:
`npm install save-image-as` or `yarn add save-image-as`

If you do not have a build routine (webpack, rollout etc.) simply include save-image-as script over an cdn in your html file for example :

`<script src="https://unpkg.com/save-image-as@latest/dist/save-image-as.js"></script>`.

See Sample Codes:

- **[Sample Vanilla Code](https://codesandbox.io/s/save-image-as-jqzc0)**
- **[Sample ReactJS Code](https://codesandbox.io/s/save-image-as-react-x48uy)**

In all JavaScript frame works (ReactJS, Angular, Vue ,etc) import this package like this:

`import {PNG, /*JPG,WEBP*/} from "save-image-as"` then assign onChange method as your file input's onChange evant handler.

Then :

1- **Create constructor with (or with defaults) options**:

    const toArrayBuffer = saveImageAs.PNG(200, .5,0);
    const toBinary = saveImageAs.PNG(200, .5,1);
    const toBase64 = saveImageAs.PNG(200, .5,2);

2- **Create Custom handler for using image data**

    function myCustomImageHandler(event){
        // Get File Content as
        toArrayBuffer.onChange(event)
        .then(data=>{
        // Use your Array Buffer formatted data as you like
        });
        // Get File Content as Binary String
        toBinary.onChange(event)
        .then(data=>{
        // Use your Binary String formatted data as you like
        });
        // Get File Content as base64 string
        toBase64.onChange(event)
        .then(data=>{
            // Use your base64 formatted data as you like
        });
        // Get File Content as text
        toText.onChange(event)
        .then(data=>{
        // Use your text  data as you like
        });

}

3- **Assign `myCustomImageHandler` to file upload element's `onChange` method:**

    const fileInput = document.getElementById("upload");
    fileInput.addEventListener("change",myCustomImageHandler);

| Option          | Default | Description                                                                                |
| --------------- | ------- | ------------------------------------------------------------------------------------------ |
| `maxImageWidth` | 200     | Define maximum width for the exported image                                                |
| `exportQuality` | .75     | Quality of exported image. Value must be between 0 - 1                                     |
| `exportDataAs`  | 2       | `0`:[readAsArrayBuffer][0] <br/> `1`: [readAsBinaryString][1] <br/> `2`:[readAsDataURL][2] |

## Errors :

| Error Code                  | Description                                                         |
| --------------------------- | ------------------------------------------------------------------- |
| `COULD_NOT_READ`            | Selected file may be corrupt or not an image file.                  |
| `ABORTED`                   | File selection cancelled                                            |
| `EMPTY_TRANSFER`            | Converted result data has no content.                               |
| `IMAGE_COULD_NOT_LOADED`    | Selected image could not load. Maybe a network error or disk error. |
| `FILE_HAS_NO_READIBLE_DATA` | Selected file has no readible content.                              |
| `NO_IMAGE_FILE_SELECTED`    | Trying to transfer befor selecting an image file.                   |

## Browser Compatibility:

### IE 11

As it equires polyfills to use `Object.values`, `Promise API` these should be manually added. Please not this is not yet fully tested.

### Chrome, Firefox, Safari, Edge

Latest 2 versions are tested.

**Please note `webp` image format is not Supported on Safari / OS X older than Big Sur **

[0]: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer
[1]: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString
[2]: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

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