@nkzw/palette-swap 2.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Christoph Nakazawa
+
+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/README.md

@@ -0,0 +1,107 @@
+# @nkzw/palette-swap
+
+Image palette swapping and color replacement tool based on canvas for Node.js and browsers to create variants from a base image.
+
+![image of a video game character](./example/Yoshi.png)
+![image of a video game character](./example/Yoshi-2.png)
+![image of a video game character](./example/Yoshi-3.png)
+
+## Installation
+
+```
+npm install @nkzw/palette-swap canvas
+```
+
+## Usage
+
+### `paletteSwap()`
+
+Here is an example of how to use `paletteSwap()` to create two variants from a base image:
+
+```js
+import { loadImage } from 'canvas';
+import { writeFileSync } from 'node:fs';
+import paletteSwap from 'paletteSwap';
+
+const results = paletteSwap(
+  await loadImage('./Yoshi.png'),
+  new Map([
+    [
+      2,
+      new Map([
+        ['#006000', '#570061'],
+        ['#00a800', '#8c00a8'],
+        ['#00f800', '#de00f8'],
+      ]),
+    ],
+    [3, 220],
+  ]),
+  new Set([
+    '#000000',
+    '#903020',
+    '#f84020',
+    '#f89000',
+    '#ff0000',
+    '#f8c0a8',
+    '#f8e0d0',
+    '#f8f8f8',
+  ]),
+);
+
+for (const [variant, canvas] of results) {
+  writeFileSync(`./Yoshi-${variant}.png`, canvas.toBuffer());
+}
+```
+
+## Parameters
+
+### `image: Image`
+
+The base image that is used for generating each variant.
+
+### `variants: ReadonlyMap<VariantName, ReadonlyMap<HEX, HEX> | Hue>`
+
+The color definitions for each variant. You can either provide a list of mappings for each color, a hue for all colors or a hue for individual colors:
+
+```js
+const variantMap = new Map([
+  // Map each color to another hex value.
+  [
+    'Variant',
+    new Map([
+      ['#ff0000', '#00ff00'],
+      ['#ffff00', '#0000ff'],
+    ]),
+  ],
+  // Change the hue of each color.
+  ['Variant2', 130],
+]);
+```
+
+### `staticColors?: Set<HEX>`
+
+A `Set` with a list of HEX values (for example `#000000`) to lock certain colors to the same values. Colors in this set will not be replaced when generating variants. For example when you are palette swapping an image of a car you might want to change the color of the chassis but not the color of the tires and the outline. If this parameter is omitted it will copy any colors from the base image that are not explicitly listed in the variants definition.
+
+### `images?: ReadonlyMap<VariantName, Image>`
+
+If you want to avoid returning variants for images that have not changed, you can add an optional `images` parameter with the current image for each variant. If the image hasn't changed, the variant will not be returned in the results.
+
+```js
+// Optionally you can provide existing variants
+const results = paletteSwap(
+  await loadImage('MyImage.png'),
+  new Map([
+    [2, new Map([])],
+    [3, 130],
+  ]),
+  null,
+  new Map([
+    [2, await loadImage('MyImage-2.png')],
+    [3, await loadImage('MyImage-3.png')],
+  ]),
+);
+```
+
+### `options?: { imageName?: string; ignoreMissing?: boolean; }`
+
+By default `paletteSwap` will throw an error for any missing color mapping. Options can be specified to ignore missing color mappings or to provide an image name used for the error message when a color mapping is missing.

package/lib/palette-swap.d.ts

@@ -0,0 +1,11 @@
+import { Canvas, Image as CanvasImage } from 'canvas';
+type Hue = number;
+export type HEX = `#${string}`;
+export type HSL = [hue: number, saturation: number, lightness: number];
+export type VariantName = number | string;
+export type Image = CanvasImage | HTMLImageElement;
+export default function paletteSwap(image: Image, inputVariants: ReadonlyMap<VariantName, ReadonlyMap<HEX, HEX> | Hue>, staticColors?: Set<HEX> | null, images?: ReadonlyMap<VariantName, Image> | null, options?: {
+    imageName?: string;
+    ignoreMissing?: boolean;
+}): ReadonlyMap<VariantName, Canvas>;
+export {};

package/lib/palette-swap.js

@@ -0,0 +1,182 @@
+// src/palette-swap.ts
+import {
+  createCanvas,
+  createImageData
+} from "canvas";
+var hexToInt32 = (hex2) => {
+  const n = Number.parseInt(hex2.slice(1), 16) & 16777215;
+  const [r, g, b] = int32ToRgb(n);
+  return b << 16 | g << 8 | r;
+};
+var int32ToRgb = (color) => {
+  const r = color >> 16 & 255;
+  const g = color >> 8 & 255;
+  const b = color & 255;
+  return [r, g, b];
+};
+var hex = (value) => Math.round(value).toString(16).padStart(2, "0");
+var rgbToHex = ([r, g, b]) => `#${hex(r)}${hex(g)}${hex(b)}`;
+var int32ToHex = (color) => {
+  const [r, g, b] = int32ToRgb(color);
+  return rgbToHex([b, g, r]);
+};
+var applyHue = (rgb, hue) => {
+  const h = hue / 360;
+  const r = rgb[2] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[0] / 255;
+  const min = Math.min(r, g, b);
+  const max = Math.max(r, g, b);
+  const delta = max - min;
+  let s;
+  const l = (min + max) / 2;
+  if (max === min) {
+    s = 0;
+  } else if (l <= 0.5) {
+    s = delta / (max + min);
+  } else {
+    s = delta / (2 - max - min);
+  }
+  let t2;
+  let t3;
+  let val;
+  if (s === 0) {
+    val = l * 255;
+    return val << 16 | val << 8 | val;
+  }
+  if (l < 0.5) {
+    t2 = l * (1 + s);
+  } else {
+    t2 = l + s - l * s;
+  }
+  const t1 = 2 * l - t2;
+  const result = [0, 0, 0];
+  for (let i = 0; i < 3; i++) {
+    t3 = h + 1 / 3 * -(i - 1);
+    if (t3 < 0) {
+      t3++;
+    }
+    if (t3 > 1) {
+      t3--;
+    }
+    if (6 * t3 < 1) {
+      val = t1 + (t2 - t1) * 6 * t3;
+    } else if (2 * t3 < 1) {
+      val = t2;
+    } else if (3 * t3 < 2) {
+      val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+    } else {
+      val = t1;
+    }
+    result[i] = val * 255;
+  }
+  return result[2] << 16 | result[1] << 8 | result[0];
+};
+var createCanvasFromImage = (image) => {
+  const canvas = createCanvas(image.width, image.height);
+  const context = canvas.getContext("2d");
+  context.drawImage(image, 0, 0);
+  return canvas;
+};
+var equals = (a, b) => {
+  if (a.width !== b.width || a.height !== b.height) {
+    return false;
+  }
+  for (let i = 0; i < a.data.length; i++) {
+    if (a.data[i] !== b.data[i]) {
+      return false;
+    }
+  }
+  return true;
+};
+function paletteSwap(image, inputVariants, staticColors, images, options) {
+  const canvas = createCanvasFromImage(image);
+  const context = canvas.getContext("2d");
+  const { height, width } = canvas;
+  const imageData = new Uint32Array(
+    context.getImageData(0, 0, width, height).data.buffer
+  );
+  const results = /* @__PURE__ */ new Map();
+  const variants = [];
+  let i = 0;
+  const palettes = /* @__PURE__ */ new Map();
+  for (const [variant, palette] of inputVariants) {
+    const newImageData = createImageData(
+      new Uint8ClampedArray(width * height * 4),
+      width
+    );
+    if (typeof palette !== "number") {
+      for (const [key, value] of palette) {
+        const k = hexToInt32(key);
+        const v = palettes.get(k) || [];
+        v[i] = hexToInt32(value);
+        palettes.set(k, v);
+      }
+    }
+    variants.push([
+      variant,
+      newImageData,
+      new Uint32Array(newImageData.data.buffer),
+      typeof palette === "number" ? palette : null
+    ]);
+    i++;
+  }
+  const staticColorNumbers = staticColors ? new Set([...staticColors].map(hexToInt32)) : null;
+  const missing = /* @__PURE__ */ new Set();
+  for (var y = 0; y < height; ++y) {
+    for (var x = 0; x < width; ++x) {
+      const index = y * width + x;
+      const originalColor = imageData[index];
+      const a = originalColor >> 24 & 255;
+      if (a === 0) {
+        continue;
+      }
+      const color = originalColor & 16777215;
+      const isStatic = staticColorNumbers?.has(color);
+      const colors = !isStatic ? palettes.get(color) : null;
+      for (let i2 = 0; i2 < variants.length; i2++) {
+        const newImageData = variants[i2][2];
+        if (isStatic) {
+          newImageData[index] = originalColor;
+          continue;
+        }
+        const hue = variants[i2][3];
+        if (hue) {
+          newImageData[index] = a << 24 | applyHue(int32ToRgb(color), hue);
+        } else if (colors?.[i2]) {
+          newImageData[index] = a << 24 | colors[i2];
+        } else if (!staticColorNumbers) {
+          newImageData[index] = originalColor;
+        } else {
+          missing.add([variants[i2][0], color]);
+        }
+      }
+    }
+  }
+  if (!options?.ignoreMissing && missing.size) {
+    throw new Error(
+      `There is no mapping for ${Array.from(
+        new Set(
+          [...missing].map(
+            ([variant, color]) => `'${int32ToHex(color)}' in variant '${variant}'`
+          )
+        )
+      ).join(", ")} in the palette${options?.imageName ? ` for image '${options?.imageName}'` : ""}.`
+    );
+  }
+  for (let i2 = 0; i2 < variants.length; i2++) {
+    const name = variants[i2][0];
+    const existingImage = images?.get(name);
+    const existingImageData = existingImage ? createCanvasFromImage(existingImage).getContext("2d").getImageData(0, 0, width, height) : null;
+    const newImageData = variants[i2][1];
+    if (!existingImageData || !equals(newImageData, existingImageData)) {
+      const newCanvas = createCanvasFromImage(image);
+      newCanvas.getContext("2d").putImageData(newImageData, 0, 0);
+      results.set(name, newCanvas);
+    }
+  }
+  return results;
+}
+export {
+  paletteSwap as default
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@nkzw/palette-swap",
+  "version": "2.1.1",
+  "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
+  "description": "Image palette swapping and color replacement tool based on canvas for Node.js and browsers.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cpojer/palette-swap.git"
+  },
+  "license": "MIT",
+  "main": "lib/palette-swap.js",
+  "type": "module",
+  "keywords": [
+    "color",
+    "palette",
+    "canvas"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "canvas": "^2.10.2"
+  },
+  "devDependencies": {
+    "@types/color-convert": "^2.0.0",
+    "@types/node": "^18.11.18",
+    "canvas": "^2.11.0",
+    "esbuild": "^0.17.2",
+    "typescript": "^4.9.4"
+  },
+  "scripts": {
+    "build": "mkdir -p lib && rm lib/*; tsc --declaration --emitDeclarationOnly --noEmit false && esbuild --target=node18 --format=esm --platform=node --outfile=lib/palette-swap.js --external:canvas --bundle ./src/palette-swap.js",
+    "test": "tsc"
+  }
+}