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/[email protected]/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

Name	Type	Attributes	Description
file	(File\|Blob)	required	A File or Blob object

Example:

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

`urlToBlob(url) → {Promise(Blob)}`

Description:

Converts a given url string to a Blob object.

Parameters:

Name	Type	Attributes	Description
url	string	required	A dataUrl or an external image url

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:

Name	Type	Attributes	Description
file	(File\|Blob)	required	A File or Blob object
quality	string	optional	The quality of the output image. Only used for webp or jpeg formats.
width	(string\|number)	optional	The width of the output image. If 0, the original width will be used. If 'auto', the width will be calculated based on the height of the image. If you have a 1280×720 image and set its height to 640 and width to 'auto', the output image will be 640×240.
height	(string\|number)	optional	The height of the output image. If 0, the original height will be used. If 'auto', the height will be calculated based on the width of the image. If you have a 1280×720 image and set its width to 240 and height to 'auto', the output image will be 640×240.
format	string	optional	The format of the output image. It can be png, jpeg, bmp, webp or gif. If you want a better compression, use webp format. If null, the source file format will be used.

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:

Name	Type	Attributes	Description
url	string	required	The image URL
quality	string	optional	The quality of the output image. Only used for webp or jpeg formats.
width	(string\|number)	optional	The width of the output image. If 0, the original width will be used. If 'auto', the width will be calculated based on the height of the image. If you have a 1280×720 image and set its height to 640 and width to 'auto', the output image will be 640×240.
height	(string\|number)	optional	The height of the output image. If 0, the original height will be used. If 'auto', the height will be calculated based on the width of the image. If you have a 1280×720 image and set its width to 240 and height to 'auto', the output image will be 640×240.
format	string	optional	The format of the output image. It can be png, jpeg, bmp, webp or gif. If you want a better compression, use webp format. If null, the source file format will be used.

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

richex-cn / image-resize-compress Goto Github PK