image-resize-compress v1.1.0

image-resize-compress

image-resize-compress is a library that allows you to compress, resize or convert an image without any extra dependency.

You can use a File, Blob or even a url.

Check out the DEMO page.

Installation

npm

npm install --save image-resize-compress

yarn

yarn add image-resize-compress

Importing

import { blobToURL, urlToBlob, fromBlob, fromURL } from 'image-resize-compress'; // ES6
// or
import * as imageResizeCompress from 'image-resize-compress'; // ES6
var imageResizeCompress = require('image-resize-compress'); // ES5 with npm

VanillaJS

<script src="https://cdn.jsdelivr.net/npm/image-resize-compress@1/dist/index.js"></script>

Usage

From a Blob or File

import { blobToURL, fromBlob } from 'image-resize-compress';
const handleBlob = (blobFile) => {
  // quality value for webp and jpeg formats.
  const quality = 80;
  // output width. 0 will keep its original width and 'auto' will calculate its scale from height.
  const width = 0;
  // output height. 0 will keep its original height and 'auto' will calculate its scale from width.
  const height = 0;
  // file format: png, jpeg, bmp, gif, webp. If null, original format will be used.
  const format = 'webp';

  // note only the blobFile argument is required
  fromBlob(blobFile, quality, width, height, format).then((blob) => {
    // will output the converted blob file
    console.log(blob);
    // will generate a url to the converted file
    blobToURL(blob).then((url) => console.log(url));
  });
};

you may display the file by doing so

<img src={url} alt="compressed file"></img>

From a URL

import { blobToURL, fromURL } from 'image-resize-compress';
const handleBlob = (sourceUrl) => {
  // quality value for webp and jpeg formats.
  const quality = 80;
  // output width. 0 will keep its original width and 'auto' will calculate its scale from height.
  const width = 0;
  // output height. 0 will keep its original height and 'auto' will calculate its scale from width.
  const height = 0;
  // file format: png, jpeg, bmp, gif, webp. If null, original format will be used.
  const format = 'webp';

  // note only the sourceUrl argument is required
  fromURL(sourceUrl, quality, width, height, format).then((blob) => {
    // will output the converted blob file
    console.log(blob);
    // will generate a url to the converted file
    blobToURL(blob).then((url) => console.log(url));
  });
};

You may also use urlToBlob. Note that server must accept cors requests.

See Cross-Origin Resource Sharing (CORS)

import { blobToURL, urlToBlob, fromBlob } from 'image-resize-compress';
const handleBlob = (sourceUrl) => {
  // quality value for webp and jpeg formats.
  const quality = 80;
  // output width. 0 will keep its original width and 'auto' will calculate its scale from height.
  const width = 0;
  // output height. 0 will keep its original height and 'auto' will calculate its scale from width.
  const height = 0;
  // file format: png, jpeg, bmp, gif, webp. If null, original format will be used.
  const format = 'webp';

  // converts given url to blob file using fetch
  const blobFile = urlToBlob(sourceUrl);

  // note only the blobFile argument is required
  fromBlob(blobFile, quality, width, height, format).then((blob) => {
    // will output the converted blob file
    console.log(blob);
    // will generate a url to the converted file
    blobToURL(blob).then((url) => console.log(url));
  });
};

##VanillaJS

<!-- make sure you have previously imported the library -->
<script src="https://cdn.jsdelivr.net/npm/image-resize-compress@1.0.7/dist/index.min.js"></script>

<!-- then you may call it like so -->
<script>
  function resizeImage() {
    var file = document.forms['myForm']['file'].files[0];
    var res = fromBlob(file).then(function (res) {
      console.log(res);
    });
  }
  // or
  function resizeImage() {
    var file = document.forms['myForm']['file'].files[0];
    var res = fromBlob(file, 75, 0, 0, 'webp').then(function (res) {
      console.log(res);
    });
  }
</script>

Methods

blobToURL(file) → {Promise(string)}

Description

Converts a given File or Blob into a DataURL string.

Parameters

Example:

imageResizeCompress.blobToURL(file).then((url) => console.log(url));

urlToBlob(url) → {Promise(Blob)}

Description:

Converts a given url string to a Blob object.

Parameters:

Example:

imageResizeCompress.urlToBlob(url).then((file) => console.log(file));

fromBlob(file[, quality, width, height, format]) → {Promise(Blob)}

Description:

Compresses, resizes and/or converts a given image File or Blob.

Parameters:

Example:

fromBlob(blobFile).then((blob) => console.log(blob));
// or
fromBlob(blobFile, quality, width, height, format).then((blob) => console.log(blob));

fromURL(url[, quality, width, height, format]) → {Promise(Blob)}

Description:

Compresses, resizes and/or converts a given image url. Note that server must accept cors requests.

See Cross-Origin Resource Sharing (CORS)

Parameters:

Example:

fromURL(url).then((blob) => console.log(blob));
// or
fromURL(url, quality, width, height, format).then((blob) => console.log(blob));

Compatibility

IE and older browsers may not be compatible. Check Promise and Fetch API support.

License

MIT