Save Image As:

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
• Sample ReactJS Code

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 1: readAsBinaryString 2:readAsDataURL |

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 **