image-resize-compress
v2.1.1
Published
Image resizer, compressor, and converter built with modern TypeScript support
Downloads
8,536
Maintainers
Readme
image-resize-compress
image-resize-compress
is a lightweight library that enables you to compress, resize, or convert images effortlessly. It supports working with File
, Blob
, and even URLs without any additional dependencies.
✨ Demo
🚀 Installation
Using npm
npm install --save image-resize-compress
Using yarn
yarn add image-resize-compress
📦 Importing the Library
ES6 Import
import { blobToURL, urlToBlob, fromBlob, fromURL } from 'image-resize-compress';
CommonJS Require
var imageResizeCompress = require('image-resize-compress');
VanillaJS via CDN
Include the library in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/image-resize-compress@1/dist/index.js"></script>
🔧 Usage
Example 1: From a Blob or File
import { fromBlob, blobToURL } from 'image-resize-compress';
const handleBlob = async (blobFile) => {
const quality = 80; // For webp and jpeg formats
const width = 'auto'; // Original width
const height = 'auto'; // Original height
const format = 'webp'; // Output format
const resizedBlob = await fromBlob(blobFile, quality, width, height, format);
const url = await blobToURL(resizedBlob);
console.log('Resized Blob:', resizedBlob);
console.log('Blob URL:', url);
};
You can use the generated URL to display the image:
<img src="{url}" alt="Resized image" />
Example 2: From a URL
import { fromURL, blobToURL } from 'image-resize-compress';
const handleURL = async (imageUrl) => {
const quality = 80;
const width = 'auto';
const height = 'auto';
const format = 'jpeg';
const resizedBlob = await fromURL(imageUrl, quality, width, height, format);
const url = await blobToURL(resizedBlob);
console.log('Resized Blob:', resizedBlob);
console.log('Blob URL:', url);
};
Note: Ensure the server hosting the image allows CORS requests.
🌐 VanillaJS Example
<script src="https://cdn.jsdelivr.net/npm/image-resize-compress/dist/index.min.js"></script>
<script>
async function resizeImage() {
const file = document.querySelector('#fileInput').files[0];
const resizedBlob = await imageResizeCompress.fromBlob(
file,
75,
0,
0,
'webp',
);
console.log(resizedBlob);
}
</script>
<input type="file" id="fileInput" onchange="resizeImage()" />
🛠️ Methods
blobToURL(blob: Blob | File) → Promise<string>
Converts a Blob
or File
into a Data URL
.
Parameters:
blob
(Blob | File): The file or blob to convert.
Example:
blobToURL(file).then((url) => console.log(url));
urlToBlob(url: string) → Promise<Blob>
Fetches an image from a URL and converts it into a Blob
.
Parameters:
- url (string): The URL of the image.
Example:
urlToBlob('https://example.com/image.png').then((blob) => console.log(blob));
fromBlob(blob: Blob | File, quality?: number, width?: number | string, height?: number | string, format?: string) → Promise<Blob>
Resizes, compresses, and/or converts a Blob
or File
.
Parameters:
- blob (Blob | File): The input file or blob.
- quality (number): Compression quality (for webp or jpeg).
- width (number | string): Target width (use
auto
to scale based on height). - height (number | string): Target height (use
auto
to scale based on width). - format (string): Desired format (e.g., jpeg, webp).
Example:
fromBlob(file, 80, 'auto', 100, 'jpeg').then((resizedBlob) =>
console.log(resizedBlob),
);
fromURL(url: string, quality?: number, width?: number | string, height?: number | string, format?: string) → Promise<Blob>
Resizes, compresses, and/or converts an image from a URL.
See Cross-Origin Resource Sharing (CORS)
Parameters:
- url (string): The image URL.
- quality (number): Compression quality (for webp or jpeg).
- width (number | string): Target width (use
auto
to scale based on height). - height (number | string): Target height (use
auto
to scale based on width). - format (string): Desired format (e.g., jpeg, webp).
Example:
fromURL('https://example.com/image.png', 75, 200, 'auto', 'webp').then(
(resizedBlob) => console.log(resizedBlob),
);
🖥️ Compatibility
image-resize-compress
supports most modern browsers. However:
Older browsers (e.g., IE) may require polyfills for Promise and Fetch API.
📜 License
Feel free to contribute, report bugs, or suggest features! 🎉