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

$3

``sh
npm install --save image-resize-compress
`

$3

`sh
yarn add image-resize-compress
`

📦 Importing the Library

$3

`js
import { blobToURL, urlToBlob, fromBlob, fromURL } from 'image-resize-compress';
`

$3

`js
var imageResizeCompress = require('image-resize-compress');
`

$3

Include the library in your HTML file:

`html

`

🔧 Usage

$3

`js
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:

`html

`

$3

`js
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

`html



`

🛠️ Methods

$3

Converts a Blob or File into a Data URL.

#### Parameters:

- blob _(Blob | File)_: The file or blob to convert.

#### Example:

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

$3

Fetches an image from a URL and converts it into a Blob.

#### Parameters:

- url (_string_): The URL of the image.

#### Example:

`js
urlToBlob('https://example.com/image.png').then((blob) => console.log(blob));
`

$3

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:

`js
fromBlob(file, 80, 'auto', 100, 'jpeg').then((resizedBlob) =>
console.log(resizedBlob),
);
`

$3

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:

`js
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

MIT

Feel free to contribute, report bugs, or suggest features! 🎉