browser-image-resizer-rotate

1.2.1 • Public • Published

browser-image-resizer

Introduction

This library allows for cross-browser image downscaling and resizing utilizing <canvas>. The code was part of Ross Turner's HTML5-ImageUploader. Note that this is meant to be a browser-only utility and will not work in Node.js. Adapted from original work to allow manyally setting the exif-orientation for rotation and flipping purposes.

Demo

https://browser-image-resizer-test.firebaseapp.com/

Installation

  • npm install browser-image-resizer
  • yarn add browser-image-resizer

Sample - Promises

import readAndCompressImage from 'browser-image-resizer';
 
const config = {
  quality: 0.5,
  maxWidth: 800,
  maxHeight: 600,
  autoRotate: true,
  debug: true
};
 
// Note: A single file comes from event.target.files on <input>
readAndCompressImage(file, config)
  .then(resizedImage => {
    // Upload file to some Web API
    const url = `http://localhost:3001/upload`;
    const formData = new FormData();
    formData.append('images', resizedImage);
    const options = {
      method: 'POST',
      body: formData
    };
 
    return fetch(url, options);
  })
  .then(result => {
    // TODO: Handle the result
    console.log(result);
  });

Sample - Async/Await

import readAndCompressImage from 'browser-image-resizer';
 
const config = {
  quality: 0.7,
  width: 800,
  height: 600
};
 
// Note: A single file comes from event.target.files on <input>
async function uploadImage(file) {
  try {
    let resizedImage = await readAndCompressImage(file, config);
 
    const url = `http://localhost:3001/upload`;
    const formData = new FormData();
    formData.append('images', resizedImage);
    const options = {
      method: 'POST',
      body: formData
    };
 
    let result = await fetch(url, options);
 
    // TODO: Handle the result
    console.log(result);
    return result;
  } catch (error) {
    console.error(error);
    throw(error);
  }
}

readAndCompressImage(file, config) => Promise

Inputs

  • file: A File object, usually from an <input>
  • config: See below
Property Name Purpose Default Value
quality The quality of the JPEG 0.5
maxWidth The maximum width for the downscaled image 800
maxHeight The maximum height for the downscaled image 600
autoRotate Reads EXIF data on the image to determine orientation true
exifOrientation Manually sets EXIF orientation value. Only works if autoRotate is false 0
debug console.log image update operations false

Outputs

A Promise that yields a JPEG Blob

Readme

Keywords

none

Package Sidebar

Install

npm i browser-image-resizer-rotate

Weekly Downloads

1

Version

1.2.1

License

MIT

Unpacked Size

162 kB

Total Files

8

Last publish

Collaborators

  • lcneves