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.
npm install --save image-resize-compress
yarn add image-resize-compress
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
<script src="https://cdn.jsdelivr.net/npm/image-resize-compress@1/dist/index.js"></script>
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>
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>
Converts a given File or Blob into a DataURL string.
Name | Type | Attributes | Description |
---|---|---|---|
file | (File|Blob) | required | A File or Blob object |
imageResizeCompress.blobToURL(file).then((url) => console.log(url));
Converts a given url string to a Blob object.
Name | Type | Attributes | Description |
---|---|---|---|
url | string | required | A dataUrl or an external image url |
imageResizeCompress.urlToBlob(url).then((file) => console.log(file));
Compresses, resizes and/or converts a given image File or Blob.
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. |
fromBlob(blobFile).then((blob) => console.log(blob));
// or
fromBlob(blobFile, quality, width, height, format).then((blob) => console.log(blob));
Compresses, resizes and/or converts a given image url. Note that server must accept cors requests.
See Cross-Origin Resource Sharing (CORS)
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. |
fromURL(url).then((blob) => console.log(blob));
// or
fromURL(url, quality, width, height, format).then((blob) => console.log(blob));
IE and older browsers may not be compatible. Check Promise and Fetch API support.