beautiful-image 0.2.5 → 0.3.6

package/README.md

@@ -1,24 +1,13 @@
 # beautiful-image
 
-Image optimization and filters powered by Rust/WASM.
+Compress and optimize images with minimal quality loss in the browser or on the server. Powered by Rust/WASM with zero native dependencies.
 
-Resize, compress, and apply filters to images in the browser. Runs fast via WebAssembly.
+## How it works
 
-## Why Rust and WASM?
+Most tools that compress images do it at the cost of visible quality degradation. `beautiful-image` combines resize, sharpening, and JPEG encoding tuned to produce the smallest file size while keeping the image looking sharp and clean.
 
-Browsers can resize and encode JPEG natively, but **cannot apply filters** like sharpen, blur, or color adjustments. Rust gives us:
-
-- Image processing algorithms (sharpen, blur, etc.) that browsers don't have
-- Fast execution via WebAssembly
-- Battle-tested `image` crate with optimized implementations
-
-## Use Cases
-
-- **E-commerce** - Bulk optimize product images before upload
-- **CMS/Blogs** - Process images on the client before saving
-- **Social apps** - Apply filters and compress photos
-- **Photo editors** - Real-time filter previews
-- **Blurred previews** - Show blurred thumbnails before unlocking content
+- **Browser** uses the native Canvas API for fast GPU-accelerated decode and resize, then hands off to WASM for sharpening and JPEG encoding
+- **Node.js** runs the full pipeline in WASM (decode, resize, filters, encode), making it ideal for serverless environments like AWS Lambda or Google Cloud Functions with no native dependencies
 
 ## Install
 
@@ -26,37 +15,111 @@ Browsers can resize and encode JPEG natively, but **cannot apply filters** like
 npm install beautiful-image
 ```
 
-## Usage
+## Browser
+
+```html
+<input type="file" id="upload" accept="image/*" />
+<img id="preview" />
+```
 
 ```typescript
 import { image } from 'beautiful-image'
 
-const result = await image(file)
-  .resize(1000)
-  .sharpen(1.5)
-  .toJpeg(75)
+const input = document.getElementById('upload') as HTMLInputElement
+
+input.addEventListener('change', async () => {
+  const file = input.files?.[0]
+  if (!file) return
+
+  const result = await image(file)
+    .resize(1200)
+    .sharpen()
+    .toJpeg(80)
 
-// result.blob - optimized image
-// result.originalSize - original size in bytes
-// result.optimizedSize - new size in bytes
-// result.compressionRatio - 0.85 = 85% smaller
+  // result.blob             — optimized image as Blob
+  // result.originalSize     — original size in bytes
+  // result.optimizedSize    — new size in bytes
+  // result.compressionRatio — 0.85 = 85% smaller
+  // result.width / result.height
+
+  document.getElementById('preview').src = URL.createObjectURL(result.blob)
+})
 ```
 
-## Filters
+For a full working demo see [`examples/web-demo`](./examples/web-demo).
+
+## Node.js
+
+```typescript
+import { image } from 'beautiful-image/node'
+import { readFileSync, writeFileSync } from 'node:fs'
+
+const input = readFileSync('./photo.jpg')
+
+const result = await image(input)
+  .resize(1200)
+  .sharpen()
+  .toJpeg(80)
+
+writeFileSync('./optimized.jpg', result.data)
+
+// result.data             — optimized image as Buffer
+// result.originalSize     — original size in bytes
+// result.optimizedSize    — new size in bytes
+// result.compressionRatio — 0.85 = 85% smaller
+```
+
+### Lambda + S3 example
+
+```typescript
+import { S3Client, GetObjectCommand, PutObjectCommand } from '@aws-sdk/client-s3'
+import { image } from 'beautiful-image/node'
+
+const s3 = new S3Client({})
+
+export const handler = async (event: any) => {
+  const bucket = event.Records[0].s3.bucket.name
+  const key = decodeURIComponent(event.Records[0].s3.object.key)
+
+  const { Body } = await s3.send(new GetObjectCommand({ Bucket: bucket, Key: key }))
+  const input = Buffer.from(await Body!.transformToByteArray())
+
+  const result = await image(input).resize(1200).sharpen().toJpeg(80)
+
+  await s3.send(new PutObjectCommand({
+    Bucket: bucket,
+    Key: `optimized/${key}`,
+    Body: result.data,
+    ContentType: 'image/jpeg',
+  }))
+}
+```
+
+## API
+
+All methods are available in both browser and Node.js:
 
 ```typescript
 image(file)
-  .resize(width)           // resize maintaining aspect ratio
-  .sharpen(sigma)          // 1.0 subtle, 3.0 strong
-  .blur(sigma)             // gaussian blur
-  .brightness(value)       // -100 to 100
-  .contrast(value)         // -100 to 100
-  .hueRotate(degrees)      // -180 to 180
-  .grayscale()             // black & white
-  .invert()                // invert colors
-  .toJpeg(quality)         // 1-100
+  .resize(width)        // resize maintaining aspect ratio
+  .sharpen(sigma)       // default 1.5 — subtle to strong
+  .blur(sigma)          // gaussian blur
+  .brightness(value)    // -100 to 100
+  .contrast(value)      // -100 to 100
+  .hueRotate(degrees)   // -180 to 180
+  .grayscale()          // black & white
+  .invert()             // invert colors
+  .toJpeg(quality)      // 1-100
 ```
 
+## Use Cases
+
+- **E-commerce** — Optimize product images before upload, saving storage and bandwidth
+- **CMS/Blogs** — Process images on the client before saving, no server needed
+- **Social apps** — Compress and filter photos before posting
+- **Lambda/Cloud Functions** — Automatically optimize images on upload to S3 or cloud storage
+- **Blurred previews** — Generate blurred thumbnails before unlocking content
+
 ## TODO
 
 - [ ] More filters (sepia, vignette, noise)
@@ -65,3 +128,4 @@ image(file)
 - [ ] Presets
 - [ ] Web Worker support
 - [ ] Batch processing
+- [ ] `getImageDimensions()` return width/height from Node.js pipeline (`image::image_dimensions()` reads only the header, no full decode)

package/dist/beautiful-image.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./image-processor-hqbPBWVw.cjs");let h=!1;async function u(){h||(await a.__wbg_init(),h=!0)}class d extends a.ImageProcessor{constructor(n){super(n)}async toJpeg(n){await u();const t=await createImageBitmap(this.file),l=t.height/t.width,e=this.targetWidth?Math.min(this.targetWidth,t.width):t.width,s=Math.round(e*l),i=new OffscreenCanvas(e,s).getContext("2d");i.imageSmoothingEnabled=!0,i.imageSmoothingQuality="high",i.drawImage(t,0,0,e,s);const m=i.getImageData(0,0,e,s),p=new Uint8Array(m.data.buffer),r=a.processImage(p,e,s,n,this.ops.sharpenSigma??null,this.ops.sharpenThreshold??null,this.ops.blurSigma??null,this.ops.brightness??null,this.ops.contrast??null,this.ops.grayscale,this.ops.invert,this.ops.hueRotate??null);t.close();const c=this.file.size,g=r.length;return{blob:new Blob([new Uint8Array(r)],{type:"image/jpeg"}),originalSize:c,optimizedSize:g,compressionRatio:1-g/c,width:e,height:s}}}const w=o=>new d(o);exports.processImage=a.processImage;exports.image=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./image-processor-SsMTFAkc.cjs");let h=!1;async function u(){h||(await a.__wbg_init(),h=!0)}class d extends a.ImageProcessor{constructor(n){super(n)}async toJpeg(n){await u();const t=await createImageBitmap(this.file),l=t.height/t.width,e=this.targetWidth?Math.min(this.targetWidth,t.width):t.width,s=Math.round(e*l),i=new OffscreenCanvas(e,s).getContext("2d");i.imageSmoothingEnabled=!0,i.imageSmoothingQuality="high",i.drawImage(t,0,0,e,s);const m=i.getImageData(0,0,e,s),p=new Uint8Array(m.data.buffer),r=a.processImage(p,e,s,n,this.ops.sharpenSigma??null,this.ops.sharpenThreshold??null,this.ops.blurSigma??null,this.ops.brightness??null,this.ops.contrast??null,this.ops.grayscale,this.ops.invert,this.ops.hueRotate??null);t.close();const c=this.file.size,g=r.length;return{blob:new Blob([new Uint8Array(r)],{type:"image/jpeg"}),originalSize:c,optimizedSize:g,compressionRatio:1-g/c,width:e,height:s}}}const w=o=>new d(o);exports.processImage=a.processImage;exports.image=w;

package/dist/beautiful-image.js

@@ -1,4 +1,4 @@
-import { I as m, p as u, _ as d } from "./image-processor-CfaoYWMt.js";
+import { I as m, p as u, _ as d } from "./image-processor-BvZZwU85.js";
 let c = !1;
 async function w() {
   c || (await d(), c = !0);

package/dist/beautiful-image.node.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("node:fs"),m=require("node:url"),l=require("node:path"),s=require("./image-processor-hqbPBWVw.cjs");var i=typeof document<"u"?document.currentScript:null;const h=l.dirname(m.fileURLToPath(typeof document>"u"?require("url").pathToFileURL(__filename).href:i&&i.tagName.toUpperCase()==="SCRIPT"&&i.src||new URL("beautiful-image.node.cjs",document.baseURI).href));let a=!1;async function f(){if(!a){const t=l.join(h,"../wasm/beautiful_image_bg.wasm"),e=c.readFileSync(t);await s.__wbg_init({module_or_path:e}),a=!0}}class p extends s.ImageProcessor{constructor(e){super(e)}async toJpeg(e){await f();const u=new Uint8Array(this.file.buffer,this.file.byteOffset,this.file.byteLength),n=s.processImageFromBytes(u,this.targetWidth??null,e,this.ops.sharpenSigma??null,this.ops.sharpenThreshold??null,this.ops.blurSigma??null,this.ops.brightness??null,this.ops.contrast??null,this.ops.grayscale,this.ops.invert,this.ops.hueRotate??null),o=this.file.byteLength,r=n.length;return{data:Buffer.from(n),originalSize:o,optimizedSize:r,compressionRatio:1-r/o}}}const d=t=>new p(t);exports.processImageFromBytes=s.processImageFromBytes;exports.image=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("node:fs"),m=require("node:url"),l=require("node:path"),s=require("./image-processor-SsMTFAkc.cjs");var i=typeof document<"u"?document.currentScript:null;const h=l.dirname(m.fileURLToPath(typeof document>"u"?require("url").pathToFileURL(__filename).href:i&&i.tagName.toUpperCase()==="SCRIPT"&&i.src||new URL("beautiful-image.node.cjs",document.baseURI).href));let a=!1;async function f(){if(!a){const t=l.join(h,"../wasm/beautiful_image_bg.wasm"),e=c.readFileSync(t);await s.__wbg_init({module_or_path:e}),a=!0}}class p extends s.ImageProcessor{constructor(e){super(e)}async toJpeg(e){await f();const u=new Uint8Array(this.file.buffer,this.file.byteOffset,this.file.byteLength),n=s.processImageFromBytes(u,this.targetWidth??null,e,this.ops.sharpenSigma??null,this.ops.sharpenThreshold??null,this.ops.blurSigma??null,this.ops.brightness??null,this.ops.contrast??null,this.ops.grayscale,this.ops.invert,this.ops.hueRotate??null),o=this.file.byteLength,r=n.length;return{data:Buffer.from(n),originalSize:o,optimizedSize:r,compressionRatio:1-r/o}}}const d=t=>new p(t);exports.processImageFromBytes=s.processImageFromBytes;exports.image=d;

package/dist/beautiful-image.node.js

@@ -1,7 +1,7 @@
 import { readFileSync as n } from "node:fs";
 import { fileURLToPath as l } from "node:url";
 import { dirname as m, join as h } from "node:path";
-import { I as p, a as u, _ as c } from "./image-processor-CfaoYWMt.js";
+import { I as p, a as u, _ as c } from "./image-processor-BvZZwU85.js";
 const f = m(l(import.meta.url));
 let r = !1;
 async function g() {