screenshot-beautify 1.1.1 → 1.2.1

package/README.md

@@ -64,18 +64,30 @@ screenshot-beautify presets
 
 | Category | Presets |
 |----------|---------|
+| **Smart** | `auto` - analyzes your screenshot and creates a matching gradient |
 | Warm | `sunset`, `sunrise`, `peach` |
 | Cool | `ocean`, `sky`, `northern` |
 | Dark | `charcoal`, `midnight`, `space` |
 | Vibrant | `neon`, `fire`, `aurora` |
 | Soft | `lavender`, `mint`, `rose` |
 
+### Auto Preset
+
+The `auto` preset extracts the dominant colors from your screenshot and generates a complementary gradient background. This ensures your beautified screenshot always looks cohesive without manual color selection.
+
+```bash
+screenshot-beautify screenshot.png --preset auto
+```
+
 ## Examples
 
 ```bash
 # Basic usage
 screenshot-beautify screenshot.png
 
+# Auto-match background to screenshot colors
+screenshot-beautify screenshot.png --preset auto
+
 # With sunset gradient
 screenshot-beautify screenshot.png --preset sunset
 

package/dist/index.js

@@ -11,6 +11,124 @@ import sharp2 from "sharp";
 
 // src/presets.ts
 import sharp from "sharp";
+function rgbToHex(r, g, b) {
+  return "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
+}
+function rgbToHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hslToRgb(h, s, l) {
+  h /= 360;
+  s /= 100;
+  l /= 100;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p2, q2, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+      if (t < 1 / 2) return q2;
+      if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+      return p2;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  };
+}
+async function extractDominantColor(imagePath) {
+  const { data, info } = await sharp(imagePath).resize(50, 50, { fit: "cover" }).raw().toBuffer({ resolveWithObject: true });
+  const colorCounts = /* @__PURE__ */ new Map();
+  let totalSaturation = 0;
+  let pixelCount = 0;
+  for (let i = 0; i < data.length; i += info.channels) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    const pixelHsl = rgbToHsl(r, g, b);
+    totalSaturation += pixelHsl.s;
+    pixelCount++;
+    const qr = Math.round(r / 32) * 32;
+    const qg = Math.round(g / 32) * 32;
+    const qb = Math.round(b / 32) * 32;
+    const key = `${qr},${qg},${qb}`;
+    const existing = colorCounts.get(key);
+    if (existing) {
+      existing.count++;
+    } else {
+      colorCounts.set(key, { count: 1, r: qr, g: qg, b: qb });
+    }
+  }
+  const sorted = [...colorCounts.values()].sort((a, b) => b.count - a.count);
+  const dominant = sorted[0];
+  const hsl = rgbToHsl(dominant.r, dominant.g, dominant.b);
+  const avgSaturation = totalSaturation / pixelCount;
+  const rgbRange = Math.max(dominant.r, dominant.g, dominant.b) - Math.min(dominant.r, dominant.g, dominant.b);
+  const isGreyish = rgbRange < 40;
+  const isNeutral = avgSaturation < 25 || hsl.s < 15 || isGreyish;
+  let color1Hsl, color2Hsl;
+  if (isNeutral) {
+    color1Hsl = {
+      h: hsl.h,
+      s: 0,
+      l: Math.min(hsl.l + 8, 55)
+    };
+    color2Hsl = {
+      h: hsl.h,
+      s: 0,
+      l: Math.max(hsl.l - 5, 20)
+    };
+  } else {
+    color1Hsl = {
+      h: hsl.h,
+      s: Math.min(hsl.s + 5, 60),
+      l: Math.min(hsl.l + 10, 60)
+    };
+    color2Hsl = {
+      h: (hsl.h + 15) % 360,
+      // Slight hue shift
+      s: hsl.s,
+      l: Math.max(hsl.l - 5, 25)
+    };
+  }
+  const color1 = hslToRgb(color1Hsl.h, color1Hsl.s, color1Hsl.l);
+  const color2 = hslToRgb(color2Hsl.h, color2Hsl.s, color2Hsl.l);
+  return [
+    rgbToHex(color1.r, color1.g, color1.b),
+    rgbToHex(color2.r, color2.g, color2.b)
+  ];
+}
 var GRADIENT_PRESETS = {
   // Warm tones
   sunset: {
@@ -94,7 +212,7 @@ var GRADIENT_PRESETS = {
   }
 };
 function listPresets() {
-  return Object.keys(GRADIENT_PRESETS);
+  return ["auto", ...Object.keys(GRADIENT_PRESETS)];
 }
 async function createPresetBackground(presetName, width, height) {
   const preset = GRADIENT_PRESETS[presetName];
@@ -131,6 +249,7 @@ async function createBackground(options) {
     height,
     imagePath,
     preset,
+    sourceImagePath,
     // Dark charcoal gradient as default
     gradientStart = "#2d3436",
     gradientEnd = "#636e72"
@@ -141,6 +260,10 @@ async function createBackground(options) {
       position: "center"
     }).png().toBuffer();
   }
+  if (preset === "auto" && sourceImagePath) {
+    const [autoStart, autoEnd] = await extractDominantColor(sourceImagePath);
+    return createAutoBackground(width, height, autoStart, autoEnd);
+  }
   if (preset && GRADIENT_PRESETS[preset]) {
     return createPresetBackground(preset, width, height);
   }
@@ -157,6 +280,20 @@ async function createBackground(options) {
   `;
   return sharp2(Buffer.from(svg)).png().toBuffer();
 }
+async function createAutoBackground(width, height, gradientStart, gradientEnd) {
+  const svg = `
+    <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style="stop-color:${gradientStart};stop-opacity:1" />
+          <stop offset="100%" style="stop-color:${gradientEnd};stop-opacity:1" />
+        </linearGradient>
+      </defs>
+      <rect width="100%" height="100%" fill="url(#grad)" />
+    </svg>
+  `;
+  return sharp2(Buffer.from(svg)).png().toBuffer();
+}
 
 // src/frame.ts
 import sharp3 from "sharp";
@@ -229,7 +366,8 @@ async function beautify(inputPath, outputPath, options = {}) {
     imagePath: backgroundImage,
     preset: backgroundPreset,
     gradientStart,
-    gradientEnd
+    gradientEnd,
+    sourceImagePath: backgroundPreset === "auto" ? inputPath : void 0
   });
   const frame = await createFrame({
     width: framedWidth,
@@ -241,6 +379,35 @@ async function beautify(inputPath, outputPath, options = {}) {
   const frameY = padding;
   const screenshotX = frameX;
   const screenshotY = frameY + titleBarHeight;
+  let shadow = null;
+  if (backgroundPreset === "auto") {
+    const shadowBlur = 30;
+    const shadowOffsetX = 0;
+    const shadowOffsetY = 8;
+    const shadowOpacity = 0.4;
+    const shadowWidth = framedWidth + shadowBlur * 2;
+    const shadowHeight = framedHeight + shadowBlur * 2;
+    const shadowSvg = `
+      <svg width="${shadowWidth}" height="${shadowHeight}" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="${shadowBlur / 2}" />
+          </filter>
+        </defs>
+        <rect
+          x="${shadowBlur}"
+          y="${shadowBlur}"
+          width="${framedWidth}"
+          height="${framedHeight}"
+          rx="${cornerRadius}"
+          ry="${cornerRadius}"
+          fill="rgba(0, 0, 0, ${shadowOpacity})"
+          filter="url(#shadow)"
+        />
+      </svg>
+    `;
+    shadow = await sharp4(Buffer.from(shadowSvg)).png().toBuffer();
+  }
   const cornerMask = Buffer.from(`
     <svg width="${imgWidth}" height="${imgHeight}" xmlns="http://www.w3.org/2000/svg">
       <rect
@@ -263,20 +430,27 @@ async function beautify(inputPath, outputPath, options = {}) {
       blend: "dest-in"
     }
   ]).png().toBuffer();
-  await sharp4(background).composite([
-    // Window frame
-    {
-      input: frame,
-      left: Math.round(frameX),
-      top: Math.round(frameY)
-    },
-    // Screenshot
-    {
-      input: roundedScreenshot,
-      left: Math.round(screenshotX),
-      top: Math.round(screenshotY)
-    }
-  ]).png().toFile(outputPath);
+  const layers = [];
+  if (shadow) {
+    const shadowBlur = 30;
+    const shadowOffsetY = 8;
+    layers.push({
+      input: shadow,
+      left: Math.round(frameX - shadowBlur),
+      top: Math.round(frameY - shadowBlur + shadowOffsetY)
+    });
+  }
+  layers.push({
+    input: frame,
+    left: Math.round(frameX),
+    top: Math.round(frameY)
+  });
+  layers.push({
+    input: roundedScreenshot,
+    left: Math.round(screenshotX),
+    top: Math.round(screenshotY)
+  });
+  await sharp4(background).composite(layers).png().toFile(outputPath);
 }
 
 // src/tray.ts
@@ -463,7 +637,8 @@ var program = new Command();
 program.name("screenshot-beautify").description("Beautify screenshots with window frames, backgrounds, and shadows").version("1.0.0");
 program.command("presets").description("List available background presets").action(() => {
   console.log("Available background presets:\n");
-  const presets = listPresets();
+  console.log("  - auto (analyzes image and creates matching gradient)");
+  const presets = listPresets().filter((p) => p !== "auto");
   presets.forEach((name) => {
     console.log(`  - ${name}`);
   });
@@ -579,7 +754,7 @@ program.command("tray <source> <output>").description("Run as a system tray app
     deleteOriginal: opts.deleteOriginal
   });
 });
-program.command("file <input>", { isDefault: true }).description("Beautify a single screenshot").option("-o, --output <path>", "Output file path").option("--padding <number>", "Padding around the screenshot", "80").option("--background <path>", "Background image path").option("--preset <name>", "Background preset (run 'presets' to see options)").action(async (input, opts) => {
+program.command("file <input>", { isDefault: true }).description("Beautify a single screenshot").option("-o, --output <path>", "Output file path").option("--padding <number>", "Padding around the screenshot", "80").option("--background <path>", "Background image path").option("--preset <name>", "Background preset (run 'presets' to see options)").option("--delete-original", "Delete original file after beautifying", false).action(async (input, opts) => {
   try {
     const inputPath = resolve2(input);
     const padding = parseInt(opts.padding || "80", 10);
@@ -592,6 +767,11 @@ program.command("file <input>", { isDefault: true }).description("Beautify a sin
     console.log(`Beautifying: ${inputPath}`);
     await beautify(inputPath, outputPath, { padding, backgroundImage, backgroundPreset });
     console.log(`Saved to: ${outputPath}`);
+    if (opts.deleteOriginal) {
+      const { unlink } = await import("fs/promises");
+      await unlink(inputPath);
+      console.log(`\u{1F5D1}\uFE0F  Deleted original: ${basename2(inputPath)}`);
+    }
   } catch (error) {
     console.error("Error:", error instanceof Error ? error.message : error);
     process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screenshot-beautify",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "CLI tool to beautify screenshots with macOS-style window frames and gradient backgrounds",
   "type": "module",
   "main": "dist/index.js",