beautiful-image 0.1.8 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +67 -0
- package/dist/beautiful-image.d.ts +30 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# beautiful-image
|
|
2
|
+
|
|
3
|
+
Image optimization and filters powered by Rust/WASM.
|
|
4
|
+
|
|
5
|
+
Resize, compress, and apply filters to images in the browser. Runs fast via WebAssembly.
|
|
6
|
+
|
|
7
|
+
## Why Rust and WASM?
|
|
8
|
+
|
|
9
|
+
Browsers can resize and encode JPEG natively, but **cannot apply filters** like sharpen, blur, or color adjustments. Rust gives us:
|
|
10
|
+
|
|
11
|
+
- Image processing algorithms (sharpen, blur, etc.) that browsers don't have
|
|
12
|
+
- Fast execution via WebAssembly
|
|
13
|
+
- Battle-tested `image` crate with optimized implementations
|
|
14
|
+
|
|
15
|
+
## Use Cases
|
|
16
|
+
|
|
17
|
+
- **E-commerce** - Bulk optimize product images before upload
|
|
18
|
+
- **CMS/Blogs** - Process images on the client before saving
|
|
19
|
+
- **Social apps** - Apply filters and compress photos
|
|
20
|
+
- **Photo editors** - Real-time filter previews
|
|
21
|
+
- **Blurred previews** - Show blurred thumbnails before unlocking content
|
|
22
|
+
|
|
23
|
+
## Install
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install beautiful-image
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { image } from 'beautiful-image'
|
|
33
|
+
|
|
34
|
+
const result = await image(file)
|
|
35
|
+
.resize(1000)
|
|
36
|
+
.sharpen(1.5)
|
|
37
|
+
.toJpeg(75)
|
|
38
|
+
|
|
39
|
+
// result.blob - optimized image
|
|
40
|
+
// result.originalSize - original size in bytes
|
|
41
|
+
// result.optimizedSize - new size in bytes
|
|
42
|
+
// result.compressionRatio - 0.85 = 85% smaller
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Filters
|
|
46
|
+
|
|
47
|
+
```typescript
|
|
48
|
+
image(file)
|
|
49
|
+
.resize(width) // resize maintaining aspect ratio
|
|
50
|
+
.sharpen(sigma) // 1.0 subtle, 3.0 strong
|
|
51
|
+
.blur(sigma) // gaussian blur
|
|
52
|
+
.brightness(value) // -100 to 100
|
|
53
|
+
.contrast(value) // -100 to 100
|
|
54
|
+
.hueRotate(degrees) // -180 to 180
|
|
55
|
+
.grayscale() // black & white
|
|
56
|
+
.invert() // invert colors
|
|
57
|
+
.toJpeg(quality) // 1-100
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## TODO
|
|
61
|
+
|
|
62
|
+
- [ ] More filters (sepia, vignette, noise)
|
|
63
|
+
- [ ] Crop
|
|
64
|
+
- [ ] Export to WebP/PNG
|
|
65
|
+
- [ ] Presets
|
|
66
|
+
- [ ] Web Worker support
|
|
67
|
+
- [ ] Batch processing
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export declare const image: (file: File | Blob) => ImageProcessor;
|
|
2
|
+
|
|
3
|
+
declare class ImageProcessor {
|
|
4
|
+
private file;
|
|
5
|
+
private targetWidth?;
|
|
6
|
+
private ops;
|
|
7
|
+
constructor(file: File | Blob);
|
|
8
|
+
resize(width: number): this;
|
|
9
|
+
sharpen(sigma?: number, threshold?: number): this;
|
|
10
|
+
blur(sigma: number): this;
|
|
11
|
+
brightness(value: number): this;
|
|
12
|
+
contrast(value: number): this;
|
|
13
|
+
grayscale(): this;
|
|
14
|
+
invert(): this;
|
|
15
|
+
hueRotate(degrees: number): this;
|
|
16
|
+
toJpeg(quality: number): Promise<OptimizeResult>;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export declare interface OptimizeResult {
|
|
20
|
+
blob: Blob;
|
|
21
|
+
originalSize: number;
|
|
22
|
+
optimizedSize: number;
|
|
23
|
+
compressionRatio: number;
|
|
24
|
+
width: number;
|
|
25
|
+
height: number;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export declare function processImage(rgba_data: Uint8Array, width: number, height: number, quality: number, sharpen_sigma: number | null | undefined, sharpen_threshold: number | null | undefined, blur_sigma: number | null | undefined, brightness: number | null | undefined, contrast: number | null | undefined, grayscale: boolean, invert: boolean, hue_rotate?: number | null): Uint8Array;
|
|
29
|
+
|
|
30
|
+
export { }
|