@kongyo2/image-to-pure-css 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kongyo2
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+import { writeFileSync } from "node:fs";
+import { basename, resolve } from "node:path";
+import { assembleCSS } from "./css-assembler.js";
+import { readImage } from "./image-reader.js";
+function parseArgs(argv) {
+    const args = argv.slice(2);
+    if (args.length === 0) {
+        console.error("Usage: kongyo-css <image> [--width N] [--tolerance N] [--output file.txt]");
+        process.exit(1);
+    }
+    const inputPath = resolve(args[0]);
+    let width;
+    let tolerance = 0;
+    let output;
+    for (let i = 1; i < args.length; i++) {
+        switch (args[i]) {
+            case "--width":
+                width = parseInt(args[++i], 10);
+                break;
+            case "--tolerance":
+                tolerance = parseInt(args[++i], 10);
+                break;
+            case "--output":
+                output = args[++i];
+                break;
+        }
+    }
+    if (!output) {
+        output = resolve(basename(inputPath).replace(/\.[^.]+$/, ".txt"));
+    }
+    return { inputPath, width, tolerance, output };
+}
+async function main() {
+    const { inputPath, width, tolerance, output } = parseArgs(process.argv);
+    console.log(`Reading: ${inputPath}`);
+    const imageData = await readImage(inputPath, width);
+    console.log(`Size: ${imageData.width}x${imageData.height}`);
+    console.log(`Generating CSS (tolerance=${tolerance})...`);
+    const css = assembleCSS(imageData, tolerance);
+    const sizeKB = (css.length / 1024).toFixed(1);
+    console.log(`Output: ${sizeKB} KB (${css.length.toLocaleString()} chars)`);
+    writeFileSync(output, css, "utf-8");
+    console.log(`Written: ${output}`);
+}
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});

package/dist/color-utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * CSS色圧縮ユーティリティ
+ * RGB値を最短のCSS色表現に変換する
+ */
+export declare function rgbToCompressedColor(r: number, g: number, b: number): string;
+export declare function colorsAreSimilar(r1: number, g1: number, b1: number, r2: number, g2: number, b2: number, tolerance: number): boolean;

package/dist/color-utils.js

@@ -0,0 +1,65 @@
+/**
+ * CSS色圧縮ユーティリティ
+ * RGB値を最短のCSS色表現に変換する
+ */
+const HEX_TO_NAME = new Map([
+    ["#ff0000", "red"],
+    ["#d2b48c", "tan"],
+    ["#ffd700", "gold"],
+    ["#cd853f", "peru"],
+    ["#ffc0cb", "pink"],
+    ["#dda0dd", "plum"],
+    ["#808080", "gray"],
+    ["#000080", "navy"],
+    ["#008080", "teal"],
+    ["#fffafa", "snow"],
+    ["#ff7f50", "coral"],
+    ["#f0e68c", "khaki"],
+    ["#f5deb3", "wheat"],
+    ["#fffff0", "ivory"],
+    ["#faf0e6", "linen"],
+    ["#f5f5dc", "beige"],
+    ["#808000", "olive"],
+    ["#f0ffff", "azure"],
+    ["#a52a2a", "brown"],
+    ["#008000", "green"],
+    ["#ffe4c4", "bisque"],
+    ["#a0522d", "sienna"],
+    ["#da70d6", "orchid"],
+    ["#fa8072", "salmon"],
+    ["#ee82ee", "violet"],
+    ["#ff6347", "tomato"],
+    ["#800000", "maroon"],
+    ["#ffa500", "orange"],
+    ["#c0c0c0", "silver"],
+    ["#800080", "purple"],
+    ["#4b0082", "indigo"],
+]);
+const hexCache = new Map();
+function toHex2(n) {
+    return n.toString(16).padStart(2, "0");
+}
+export function rgbToCompressedColor(r, g, b) {
+    const key = (r << 16) | (g << 8) | b;
+    const cached = hexCache.get(key);
+    if (cached)
+        return cached;
+    const hex = `#${toHex2(r)}${toHex2(g)}${toHex2(b)}`;
+    const named = HEX_TO_NAME.get(hex);
+    if (named) {
+        hexCache.set(key, named);
+        return named;
+    }
+    if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {
+        const short = `#${hex[1]}${hex[3]}${hex[5]}`;
+        hexCache.set(key, short);
+        return short;
+    }
+    hexCache.set(key, hex);
+    return hex;
+}
+export function colorsAreSimilar(r1, g1, b1, r2, g2, b2, tolerance) {
+    return (Math.abs(r1 - r2) <= tolerance &&
+        Math.abs(g1 - g2) <= tolerance &&
+        Math.abs(b1 - b2) <= tolerance);
+}

package/dist/css-assembler.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CSS組み立てモジュール
+ * 全行のグラデーションを合成し、最終的なインラインスタイルのdivを生成する
+ *
+ * 最適化:
+ * - 最頻出色をbackground-colorに設定
+ * - 全ピクセルがbackground-colorの行はgradientをスキップ
+ * - background-size/repeatは全レイヤー共通値を1つだけ指定
+ */
+import type { ImageData } from "./types.js";
+export declare function findDominantColor(imageData: ImageData): string;
+export declare function assembleCSS(imageData: ImageData, tolerance: number): string;

package/dist/css-assembler.js

@@ -0,0 +1,53 @@
+/**
+ * CSS組み立てモジュール
+ * 全行のグラデーションを合成し、最終的なインラインスタイルのdivを生成する
+ *
+ * 最適化:
+ * - 最頻出色をbackground-colorに設定
+ * - 全ピクセルがbackground-colorの行はgradientをスキップ
+ * - background-size/repeatは全レイヤー共通値を1つだけ指定
+ */
+import { rgbToCompressedColor } from "./color-utils.js";
+import { buildRowGradient } from "./gradient-builder.js";
+export function findDominantColor(imageData) {
+    const colorCount = new Map();
+    for (const row of imageData.pixels) {
+        for (const pixel of row) {
+            const color = rgbToCompressedColor(pixel.r, pixel.g, pixel.b);
+            colorCount.set(color, (colorCount.get(color) ?? 0) + 1);
+        }
+    }
+    let maxCount = 0;
+    let dominant = "#000";
+    for (const [color, count] of colorCount) {
+        if (count > maxCount) {
+            maxCount = count;
+            dominant = color;
+        }
+    }
+    return dominant;
+}
+export function assembleCSS(imageData, tolerance) {
+    const { width, height, pixels } = imageData;
+    const bgColor = findDominantColor(imageData);
+    const gradients = [];
+    const positions = [];
+    for (let y = 0; y < height; y++) {
+        const result = buildRowGradient(pixels[y], tolerance);
+        if (result.isSolid && result.solidColor === bgColor) {
+            continue;
+        }
+        gradients.push(result.gradient);
+        positions.push(y === 0 ? "0 0" : `0 ${y}px`);
+    }
+    const parts = [
+        `width:${width}px`,
+        `height:${height}px`,
+        `background-color:${bgColor}`,
+        `background-image:${gradients.join(",")}`,
+        `background-size:100% 1px`,
+        `background-position:${positions.join(",")}`,
+        `background-repeat:no-repeat`,
+    ];
+    return `<div style="${parts.join(";")}"></div>`;
+}

package/dist/gradient-builder.d.ts

@@ -0,0 +1,23 @@
+/**
+ * グラデーション構築モジュール
+ *
+ * 2つの動作モード:
+ *
+ * 【Hard Stop モード (tolerance=0)】
+ *   - 隣接同色ピクセルをRLE圧縮
+ *   - CSS gradient の "0" クランプトリックでハードストップ生成
+ *   - ピクセル完全再現
+ *
+ * 【Smooth モード (tolerance>0)】
+ *   - 貪欲線形近似アルゴリズムで最適なストップ位置を検出
+ *   - CSSのネイティブ線形補間を活用して滑らかな遷移を表現
+ *   - グラデーション領域のストップ数を大幅に削減
+ *   - エッジ部分は自動的に短いセグメントになり鮮明さを維持
+ */
+import type { RGB } from "./types.js";
+export interface RowGradientResult {
+    gradient: string;
+    isSolid: boolean;
+    solidColor: string | null;
+}
+export declare function buildRowGradient(row: RGB[], tolerance: number): RowGradientResult;

package/dist/gradient-builder.js

@@ -0,0 +1,146 @@
+/**
+ * グラデーション構築モジュール
+ *
+ * 2つの動作モード:
+ *
+ * 【Hard Stop モード (tolerance=0)】
+ *   - 隣接同色ピクセルをRLE圧縮
+ *   - CSS gradient の "0" クランプトリックでハードストップ生成
+ *   - ピクセル完全再現
+ *
+ * 【Smooth モード (tolerance>0)】
+ *   - 貪欲線形近似アルゴリズムで最適なストップ位置を検出
+ *   - CSSのネイティブ線形補間を活用して滑らかな遷移を表現
+ *   - グラデーション領域のストップ数を大幅に削減
+ *   - エッジ部分は自動的に短いセグメントになり鮮明さを維持
+ */
+import { rgbToCompressedColor } from "./color-utils.js";
+// ==========================================
+// Hard Stop モード (tolerance=0)
+// ==========================================
+function buildRowRuns(row) {
+    if (row.length === 0)
+        return [];
+    const runs = [];
+    let runColor = rgbToCompressedColor(row[0].r, row[0].g, row[0].b);
+    let runStart = 0;
+    for (let i = 1; i <= row.length; i++) {
+        const color = i < row.length ? rgbToCompressedColor(row[i].r, row[i].g, row[i].b) : null;
+        if (color !== runColor) {
+            runs.push({ color: runColor, start: runStart, end: i });
+            if (i < row.length && color !== null) {
+                runColor = color;
+                runStart = i;
+            }
+        }
+    }
+    return runs;
+}
+function runsToHardGradient(runs) {
+    if (runs.length === 1) {
+        const c = runs[0].color;
+        return `linear-gradient(${c},${c})`;
+    }
+    const stops = [];
+    for (let i = 0; i < runs.length; i++) {
+        const run = runs[i];
+        if (i === 0) {
+            stops.push(`${run.color} ${run.end}px`);
+        }
+        else if (i === runs.length - 1) {
+            stops.push(`${run.color} 0`);
+        }
+        else {
+            stops.push(`${run.color} 0 ${run.end}px`);
+        }
+    }
+    return `linear-gradient(90deg,${stops.join(",")})`;
+}
+// ==========================================
+// Smooth モード (tolerance>0)
+// ==========================================
+/**
+ * row[start]→row[end] の線形補間が中間ピクセル全てにtolerance以内で一致するか判定
+ */
+function canLinearApproximate(row, start, end, tolerance) {
+    if (end - start <= 1)
+        return true;
+    const sc = row[start];
+    const ec = row[end];
+    const span = end - start;
+    for (let j = start + 1; j < end; j++) {
+        const t = (j - start) / span;
+        const er = sc.r + (ec.r - sc.r) * t;
+        const eg = sc.g + (ec.g - sc.g) * t;
+        const eb = sc.b + (ec.b - sc.b) * t;
+        if (Math.abs(er - row[j].r) > tolerance ||
+            Math.abs(eg - row[j].g) > tolerance ||
+            Math.abs(eb - row[j].b) > tolerance) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * 貪欲法で線形近似可能な最長セグメントを見つけ、最適なストップ位置を返す
+ */
+function findOptimalStops(row, tolerance) {
+    if (row.length <= 2) {
+        return row.length === 1 ? [0] : [0, row.length - 1];
+    }
+    const stops = [0];
+    let segStart = 0;
+    for (let candidate = 2; candidate < row.length; candidate++) {
+        if (!canLinearApproximate(row, segStart, candidate, tolerance)) {
+            stops.push(candidate - 1);
+            segStart = candidate - 1;
+        }
+    }
+    if (stops[stops.length - 1] !== row.length - 1) {
+        stops.push(row.length - 1);
+    }
+    return stops;
+}
+function stopsToSmoothGradient(row, stops) {
+    const colors = stops.map((pos) => rgbToCompressedColor(row[pos].r, row[pos].g, row[pos].b));
+    if (colors.every((c) => c === colors[0])) {
+        return `linear-gradient(${colors[0]},${colors[0]})`;
+    }
+    const lastIdx = row.length - 1;
+    const parts = [];
+    for (let i = 0; i < stops.length; i++) {
+        const pos = stops[i];
+        const color = colors[i];
+        if (i === 0 && pos === 0) {
+            parts.push(color);
+        }
+        else if (i === stops.length - 1 && pos === lastIdx) {
+            parts.push(color);
+        }
+        else {
+            parts.push(`${color} ${pos}px`);
+        }
+    }
+    return `linear-gradient(90deg,${parts.join(",")})`;
+}
+// ==========================================
+// Public API
+// ==========================================
+export function buildRowGradient(row, tolerance) {
+    if (tolerance === 0) {
+        const runs = buildRowRuns(row);
+        return {
+            gradient: runsToHardGradient(runs),
+            isSolid: runs.length === 1,
+            solidColor: runs.length === 1 ? runs[0].color : null,
+        };
+    }
+    const stops = findOptimalStops(row, tolerance);
+    const firstColor = rgbToCompressedColor(row[stops[0]].r, row[stops[0]].g, row[stops[0]].b);
+    const allSame = stops.every((s) => rgbToCompressedColor(row[s].r, row[s].g, row[s].b) === firstColor);
+    return {
+        gradient: stopsToSmoothGradient(row, stops),
+        isSolid: allSame,
+        solidColor: allSame ? firstColor : null,
+    };
+}

package/dist/image-reader.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 画像読み込みモジュール
+ * sharpを使って画像をRGBピクセルマトリクスに変換する
+ */
+import type { ImageData } from "./types.js";
+export declare function readImage(input: string | Buffer, maxWidth?: number): Promise<ImageData>;

package/dist/image-reader.js

@@ -0,0 +1,31 @@
+/**
+ * 画像読み込みモジュール
+ * sharpを使って画像をRGBピクセルマトリクスに変換する
+ */
+import sharp from "sharp";
+export async function readImage(input, maxWidth) {
+    let pipeline = sharp(input);
+    if (maxWidth) {
+        pipeline = pipeline.resize(maxWidth, undefined, {
+            fit: "inside",
+            withoutEnlargement: true,
+            kernel: sharp.kernel.lanczos3,
+        });
+    }
+    const { data, info } = await pipeline.removeAlpha().raw().toBuffer({ resolveWithObject: true });
+    const { width, height } = info;
+    const pixels = [];
+    for (let y = 0; y < height; y++) {
+        const row = [];
+        for (let x = 0; x < width; x++) {
+            const idx = (y * width + x) * 3;
+            row.push({
+                r: data[idx],
+                g: data[idx + 1],
+                b: data[idx + 2],
+            });
+        }
+        pixels.push(row);
+    }
+    return { width, height, pixels };
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { colorsAreSimilar, rgbToCompressedColor } from "./color-utils.js";
+export { assembleCSS, findDominantColor } from "./css-assembler.js";
+export { buildRowGradient, type RowGradientResult, } from "./gradient-builder.js";
+export { readImage } from "./image-reader.js";
+export type { ColorRun, ConvertOptions, ImageData, RGB } from "./types.js";
+export interface ConvertImageOptions {
+    width?: number;
+    tolerance?: number;
+}
+export declare function convertImageToCSS(input: string | Buffer, options?: ConvertImageOptions): Promise<string>;

package/dist/index.js

@@ -0,0 +1,11 @@
+export { colorsAreSimilar, rgbToCompressedColor } from "./color-utils.js";
+export { assembleCSS, findDominantColor } from "./css-assembler.js";
+export { buildRowGradient, } from "./gradient-builder.js";
+export { readImage } from "./image-reader.js";
+import { assembleCSS } from "./css-assembler.js";
+import { readImage } from "./image-reader.js";
+export async function convertImageToCSS(input, options = {}) {
+    const { width, tolerance = 0 } = options;
+    const imageData = await readImage(input, width);
+    return assembleCSS(imageData, tolerance);
+}

package/dist/types.d.ts

@@ -0,0 +1,20 @@
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface ImageData {
+    width: number;
+    height: number;
+    pixels: RGB[][];
+}
+export interface ConvertOptions {
+    width?: number;
+    tolerance?: number;
+    output?: string;
+}
+export interface ColorRun {
+    color: string;
+    start: number;
+    end: number;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@kongyo2/image-to-pure-css",
+  "version": "0.1.2",
+  "description": "Convert images to pure CSS using linear gradients",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "bin": {
+    "kongyo-css": "./dist/cli.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "lint": "biome check src",
+    "lint:fix": "biome check --write src",
+    "check": "biome check src && tsc --noEmit",
+    "prepublishOnly": "npm run check && npm run build"
+  },
+  "keywords": [
+    "css",
+    "image",
+    "converter",
+    "gradient",
+    "pure-css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kongyo2/image-to-pure-css.git"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "sharp": "^0.33.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.8",
+    "@types/node": "^22.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  }
+}