Donaldcwl/browser-image-compressionPublic

NotificationsYou must be signed in to change notification settings
Fork182
Star1.6k

Image compression in web browser

License

MIT license

1.6k stars 182 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 302 Commits
coverage		coverage
dist		dist
example-express-server		example-express-server
example		example
lib		lib
test		test
.babelrc		.babelrc
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.mocharc.js		.mocharc.js
.npmignore		.npmignore
.nycrc		.nycrc
.travis.yml		.travis.yml
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
rollup.config.js		rollup.config.js
yarn.lock		yarn.lock

Repository files navigation

Browser Image Compression

Javascript module to be run in the web browser for image compression.

Features

You can use this module to compress jpeg, png, webp, and bmp images by reducingresolution orstorage size before uploading to the application server to save bandwidth.
Multi-thread (web worker) non-blocking compression is supported through options.

Demo / Example

openhttps://donaldcwl.github.io/browser-image-compression/example/basic.html

or check the "example" folder in this repo

Usage

<inputtype="file"accept="image/*"onchange="handleImageUpload(event);">

async await syntax:

asyncfunctionhandleImageUpload(event){constimageFile=event.target.files[0];console.log('originalFile instanceof Blob',imageFileinstanceofBlob);// trueconsole.log(`originalFile size${imageFile.size/1024/1024} MB`);constoptions={maxSizeMB:1,maxWidthOrHeight:1920,useWebWorker:true,}try{constcompressedFile=awaitimageCompression(imageFile,options);console.log('compressedFile instanceof Blob',compressedFileinstanceofBlob);// trueconsole.log(`compressedFile size${compressedFile.size/1024/1024} MB`);// smaller than maxSizeMBawaituploadToServer(compressedFile);// write your own logic}catch(error){console.log(error);}}

Promise.then().catch() syntax:

Click to expand

functionhandleImageUpload(event){varimageFile=event.target.files[0];console.log('originalFile instanceof Blob',imageFileinstanceofBlob);// trueconsole.log(`originalFile size${imageFile.size/1024/1024} MB`);varoptions={maxSizeMB:1,maxWidthOrHeight:1920,useWebWorker:true}imageCompression(imageFile,options).then(function(compressedFile){console.log('compressedFile instanceof Blob',compressedFileinstanceofBlob);// trueconsole.log(`compressedFile size${compressedFile.size/1024/1024} MB`);// smaller than maxSizeMBreturnuploadToServer(compressedFile);// write your own logic}).catch(function(error){console.log(error.message);});}

Installing

Use as ES module:

You can install it via npm or yarn

npm install browser-image-compression --save# oryarn add browser-image-compression

importimageCompressionfrom'browser-image-compression';

(can be used in frameworks like React, Angular, Vue etc)

(work with bundlers like webpack and rollup)

(or) Load UMD js file:

You can download imageCompression from thedist folder.

Alternatively, you can use a CDN likedelivrjs:

<scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js"></script>

Support

If this project helps you reduce the time to develop, you can buy me a cup of coffee :)

(powered by Stripe)

API

Main function

// you should provide one of maxSizeMB, maxWidthOrHeight in the optionsconstoptions:Options={maxSizeMB:number,// (default: Number.POSITIVE_INFINITY)maxWidthOrHeight:number,// compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight (default: undefined)// but, automatically reduce the size to smaller than the maximum Canvas size supported by each browser.// Please check the Caveat part for details.onProgress:Function,// optional, a function takes one progress argument (percentage from 0 to 100)useWebWorker:boolean,// optional, use multi-thread web worker, fallback to run in main-thread (default: true)libURL:string,// optional, the libURL of this library for importing script in Web Worker (default: https://cdn.jsdelivr.net/npm/browser-image-compression/dist/browser-image-compression.js)preserveExif:boolean,// optional, use preserve Exif metadata for JPEG image e.g., Camera model, Focal length, etc (default: false)signal:AbortSignal,// optional, to abort / cancel the compression// following options are for advanced usersmaxIteration:number,// optional, max number of iteration to compress the image (default: 10)exifOrientation:number,// optional, see https://stackoverflow.com/a/32490603/10395024fileType:string,// optional, fileType override e.g., 'image/jpeg', 'image/png' (default: file.type)initialQuality:number,// optional, initial quality value between 0 and 1 (default: 1)alwaysKeepResolution:boolean// optional, only reduce quality, always keep width and height (default: false)}imageCompression(file:File,options:Options):Promise<File>

Caveat

Each browser limitsthe maximum size of a browser Canvas object.
So, we resize the image to less than the maximum size that each browser restricts.
(However, theproportion/ratio of the image remains.)

Abort / Cancel Compression

To use this feature, please check the browser compatibility:https://caniuse.com/?search=AbortController

functionhandleImageUpload(event){varimageFile=event.target.files[0];varcontroller=newAbortController();varoptions={// other options heresignal:controller.signal,}imageCompression(imageFile,options).then(function(compressedFile){returnuploadToServer(compressedFile);// write your own logic}).catch(function(error){console.log(error.message);// output: I just want to stop});// simulate abort the compression after 1.5 secondssetTimeout(function(){controller.abort(newError('I just want to stop'));},1500);}

Helper function

for advanced users only, most users won't need to use the helper functions

imageCompression.getDataUrlFromFile(file:File):Promise<base64encodedstring>imageCompression.getFilefromDataUrl(dataUrl:string,filename:string,lastModified?:number):Promise<File>imageCompression.loadImage(url:string):Promise<HTMLImageElement>imageCompression.drawImageInCanvas(img:HTMLImageElement,fileType?:string):HTMLCanvasElement|OffscreenCanvasimageCompression.drawFileInCanvas(file:File,options?:Options):Promise<[ImageBitmap|HTMLImageElement,HTMLCanvasElement|OffscreenCanvas]>imageCompression.canvasToFile(canvas:HTMLCanvasElement|OffscreenCanvas,fileType:string,fileName:string,fileLastModified:number,quality?:number):Promise<File>imageCompression.getExifOrientation(file:File):Promise<number>// based on https://stackoverflow.com/a/32490603/10395024imageCompression.copyExifWithoutOrientation(copyExifFromFile:File,copyExifToFile:File):Promise<File>// based on https://gist.github.com/tonytonyjan/ffb7cd0e82cb293b843ece7e79364233

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Opera
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

IE support

This library uses ES features such as Promise API, globalThis. If you need to support browsers that do not support new ES features like IE. You can include the core-js polyfill in your project.

You can include the following script to load the core-js polyfill:

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.21.1/minified.min.js"></script>

Webp support

The webp compression is supported on major browsers. Please seehttps://caniuse.com/mdn-api_offscreencanvas_converttoblob_option_type_parameter_webp for browser compatibility.

Remarks for compression to work in Web Worker

The browser needs to support "OffscreenCanvas" API in order to take advantage of non-blocking compression. If the browser does not support "OffscreenCanvas" API, the main thread is used instead. Seehttps://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility for browser compatibility of "OffscreenCanvas" API.

Typescript type definitions

Typescript definitions are included in the package & referenced in thetypes section of thepackage.json

Remarks on Content Security Policy (CSP)

If your website has CSP enabled and you want to use Web Worker (useWebWorker: true), please add the following to the response headercontent-security-policy: script-src 'self' blob: https://cdn.jsdelivr.net

blob: is for loading Web Worker script
https://cdn.jsdelivr.net is for importing this library from CDN inside Web Worker script. If you don't want to load this library from CDN, you can set your self hosted library URL inoptions.libURL.

Contribution

fork the repo and git clone it
runnpm run watch # it will watch code change in lib/ folder and generate js in dist/ folder
add/update code in lib/ folder
try the code by opening example/development.html which will load the js in dist/ folder
add/update test in test/ folder
npm run test
push to your forked repo on github
make a pull request to dev branch of this repo