https://github.com/ShreyashThorat-17/ngx-image-compression
https://github.com/ShreyashThorat-17/ngx-image-compression
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ShreyashThorat-17/ngx-image-compression
- Owner: ShreyashThorat-17
- License: mit
- Created: 2025-08-06T07:04:51.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-08-06T09:22:55.000Z (3 months ago)
- Last Synced: 2025-08-06T11:20:42.796Z (3 months ago)
- Language: TypeScript
- Size: 11.8 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-image-compression - A lightweight image compression and conversion library for Angular. (Third Party Components / Images)
- awesome-angular - ngx-image-compression - A lightweight image compression and conversion library for Angular. (Third Party Components / Images)
README
# 📦 ngx-image-compression
A **lightweight image compression and conversion library** for Angular. Ideal for optimizing large images (like 10MB+) **before uploading to S3 or a server**. Supports format conversion (e.g., JPG → WebP), resizing, quality tuning, and base64 or Blob output.
---
## 🚀 Features
- 🔧 Compress images using canvas
- 📐 Resize to desired dimensions
- 🎯 Convert to different formats (`webp`, `jpeg`, `png`)
- 🧠 Works with File, Blob, or base64 outputs
- 📦 Lightweight and framework-friendly
- 🟢 Built for Angular 16+ standalone architecture
---
## 📥 Installation
```
npm install ngx-image-lite
```
---
## 🛠️ Usage
```
import { compressImage } from 'ngx-image-lite';
const result = await compressImage(file, {
maxWidth: 800,
maxHeight: 800,
quality: 0.7,
format: 'webp', // optional: 'jpeg', 'png', or 'webp'
returnType: 'file', // 'file' | 'base64' | 'blob'
fileName: 'output' // only for returnType: 'file'
});
```
---
## 📘 Parameters
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `maxWidth` | `number` | `800` | Max width of output image |
| `maxHeight` | `number` | `800` | Max height of output image |
| `quality` | `number` | `0.7` | Compression quality (0 to 1) |
| `format` | `string` | `'webp'` | Output format: 'webp', 'jpeg', 'png' |
| `returnType` | `string` | `'file'` | 'file', 'base64', or 'blob' |
| `fileName` | `string` | `'output'` | File name (if returnType is file) |
---
## 📦 Returns
- If `returnType = 'file'` → returns a `File` object
- If `returnType = 'blob'` → returns a `Blob`
- If `returnType = 'base64'` → returns a `string` (base64)
---
## 🖼️ Example with Angular
```
const result = await compressImage(file, {
maxWidth: 1024,
maxHeight: 1024,
quality: 0.6,
format: 'jpeg',
returnType: 'base64'
});
this.previewUrl = result; // Display in
```
---
## 📌 Use Cases
- Upload large images to AWS S3 with smaller payload
- Resize user-uploaded profile or gallery images
- Convert formats (e.g., PNG → WebP) for optimized delivery
- Reduce load on backend image processing
---
## 🔖 License
[MIT](LICENSE)
---
## 🔍 Keywords
angular, image compression, image conversion, webp, optimize image, resize, compress, image, s3 upload, ngx, frontend compression
```