Save-image-as NPM

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.