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