k-centroid-scaler 1.0.0

package/README.md

@@ -0,0 +1,138 @@
+# K-Centroid Image Scaler - WebAssembly Module
+
+A Rust/WebAssembly implementation of the K-Centroid image downscaling algorithm, converted from the original Lua/Aseprite script.
+
+## Algorithm Overview
+
+The K-Centroid scaler uses K-means clustering to intelligently downscale images:
+
+1. **Tile Division**: The image is divided into tiles based on the target dimensions
+2. **K-Means Clustering**: Each tile undergoes K-means clustering to identify dominant colors
+3. **Color Selection**: The most dominant color (centroid with most pixels) represents each tile
+4. **Downscaling**: Each pixel in the output image uses the dominant color from its corresponding tile
+
+This approach preserves important color information better than simple averaging, making it ideal for pixel art and images where color fidelity is important.
+
+## Module Interface
+
+### Main Function
+
+```rust
+k_centroid_resize(
+    image_data: &[u8],      // RGBA image buffer
+    original_width: u32,    // Source image width
+    original_height: u32,   // Source image height
+    target_width: u32,      // Desired output width
+    target_height: u32,     // Desired output height
+    centroids: u32,         // Number of color centroids (2-16 recommended)
+    iterations: u32,        // K-means iterations (1-20 recommended)
+) -> ImageResult
+```
+
+### Return Value
+
+```javascript
+{
+    data: Uint8Array,    // RGBA pixel data
+    width: number,       // Output width
+    height: number       // Output height
+}
+```
+
+## Build Instructions
+
+### Prerequisites
+
+- Rust toolchain (`curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh`)
+- wasm-pack (`curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh`)
+
+### Building
+
+```bash
+# Make the build script executable
+chmod +x build.sh
+
+# Run the build script
+./build.sh
+
+# Or manually:
+wasm-pack build --target web --out-dir pkg
+```
+
+## Usage Example
+
+```javascript
+import init, { process_image } from './pkg/k_centroid_scaler.js';
+
+async function downscaleImage() {
+    // Initialize the WASM module
+    await init();
+    
+    // Get your image data (e.g., from a canvas)
+    const canvas = document.getElementById('myCanvas');
+    const ctx = canvas.getContext('2d');
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    
+    // Process the image
+    const result = process_image(
+        imageData.data,
+        canvas.width,
+        canvas.height,
+        Math.floor(canvas.width / 2),   // Half size
+        Math.floor(canvas.height / 2),
+        4,  // 4 centroids per tile
+        5   // 5 iterations
+    );
+    
+    // Use the result
+    const outputImageData = new ImageData(
+        new Uint8ClampedArray(result.data),
+        result.width,
+        result.height
+    );
+    
+    // Draw to output canvas
+    const outputCanvas = document.getElementById('output');
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCanvas.width = result.width;
+    outputCanvas.height = result.height;
+    outputCtx.putImageData(outputImageData, 0, 0);
+}
+```
+
+## Parameters Guide
+
+### `centroids` (2-16)
+- **Lower values (2-4)**: Stronger color quantization, more stylized results
+- **Higher values (8-16)**: Better color preservation, closer to original
+
+### `iterations` (1-20)
+- **Lower values (1-3)**: Faster processing, less accurate clustering
+- **Higher values (10-20)**: More accurate color selection, slower processing
+
+## Behavior Notes
+
+1. **Deterministic Results**: Uses a fixed random seed (1) for consistent K-means initialization
+2. **Dominant Color Selection**: Always selects the centroid with the most assigned pixels
+3. **Tile Processing**: Each tile is processed independently, maintaining local color characteristics
+4. **Edge Handling**: Properly handles edge tiles that may be smaller than the standard tile size
+
+## Performance Considerations
+
+- **Complexity**: O(n × k × i) where n = pixels per tile, k = centroids, i = iterations
+- **Memory**: Lightweight, processes tiles individually
+- **WebAssembly Optimizations**: 
+  - Compiled with size optimizations (`opt-level = "z"`)
+  - Link-time optimization enabled
+  - Optional wasm-opt post-processing
+
+## Differences from Original Lua Version
+
+1. **Output**: Returns only the downscaled image (not the intermediate K-tiles visualization)
+2. **Language**: Rust provides better performance and type safety
+3. **Platform**: Runs in browsers via WebAssembly instead of Aseprite
+4. **Interface**: Direct buffer manipulation instead of Aseprite API calls
+
+## License
+
+Converted to Rust/WebAssembly for web usage. Original algorithm from Aseprite Lua script.

package/k_centroid_scaler.js

@@ -0,0 +1,466 @@
+let wasm;
+
+let heap = new Array(128).fill(undefined);
+
+heap.push(undefined, null, true, false);
+
+function getObject(idx) { return heap[idx]; }
+
+let heap_next = heap.length;
+
+function addHeapObject(obj) {
+    if (heap_next === heap.length) heap.push(heap.length + 1);
+    const idx = heap_next;
+    heap_next = heap[idx];
+
+    heap[idx] = obj;
+    return idx;
+}
+
+let cachedUint8ArrayMemory0 = null;
+
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function getArrayU8FromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
+}
+
+function handleError(f, args) {
+    try {
+        return f.apply(this, args);
+    } catch (e) {
+        wasm.__wbindgen_export_0(addHeapObject(e));
+    }
+}
+
+function debugString(val) {
+    // primitive types
+    const type = typeof val;
+    if (type == 'number' || type == 'boolean' || val == null) {
+        return  `${val}`;
+    }
+    if (type == 'string') {
+        return `"${val}"`;
+    }
+    if (type == 'symbol') {
+        const description = val.description;
+        if (description == null) {
+            return 'Symbol';
+        } else {
+            return `Symbol(${description})`;
+        }
+    }
+    if (type == 'function') {
+        const name = val.name;
+        if (typeof name == 'string' && name.length > 0) {
+            return `Function(${name})`;
+        } else {
+            return 'Function';
+        }
+    }
+    // objects
+    if (Array.isArray(val)) {
+        const length = val.length;
+        let debug = '[';
+        if (length > 0) {
+            debug += debugString(val[0]);
+        }
+        for(let i = 1; i < length; i++) {
+            debug += ', ' + debugString(val[i]);
+        }
+        debug += ']';
+        return debug;
+    }
+    // Test for built-in
+    const builtInMatches = /\[object ([^\]]+)\]/.exec(toString.call(val));
+    let className;
+    if (builtInMatches && builtInMatches.length > 1) {
+        className = builtInMatches[1];
+    } else {
+        // Failed to match the standard '[object ClassName]'
+        return toString.call(val);
+    }
+    if (className == 'Object') {
+        // we're a user defined class or Object
+        // JSON.stringify avoids problems with cycles, and is generally much
+        // easier than looping through ownProperties of `val`.
+        try {
+            return 'Object(' + JSON.stringify(val) + ')';
+        } catch (_) {
+            return 'Object';
+        }
+    }
+    // errors
+    if (val instanceof Error) {
+        return `${val.name}: ${val.message}\n${val.stack}`;
+    }
+    // TODO we could test for more things here, like `Set`s and `Map`s.
+    return className;
+}
+
+let WASM_VECTOR_LEN = 0;
+
+const cachedTextEncoder = new TextEncoder();
+
+if (!('encodeInto' in cachedTextEncoder)) {
+    cachedTextEncoder.encodeInto = function (arg, view) {
+        const buf = cachedTextEncoder.encode(arg);
+        view.set(buf);
+        return {
+            read: arg.length,
+            written: buf.length
+        };
+    }
+}
+
+function passStringToWasm0(arg, malloc, realloc) {
+
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length, 1) >>> 0;
+        getUint8ArrayMemory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len, 1) >>> 0;
+
+    const mem = getUint8ArrayMemory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+        const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+        const ret = cachedTextEncoder.encodeInto(arg, view);
+
+        offset += ret.written;
+        ptr = realloc(ptr, len, offset, 1) >>> 0;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+let cachedDataViewMemory0 = null;
+
+function getDataViewMemory0() {
+    if (cachedDataViewMemory0 === null || cachedDataViewMemory0.buffer.detached === true || (cachedDataViewMemory0.buffer.detached === undefined && cachedDataViewMemory0.buffer !== wasm.memory.buffer)) {
+        cachedDataViewMemory0 = new DataView(wasm.memory.buffer);
+    }
+    return cachedDataViewMemory0;
+}
+
+let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+
+cachedTextDecoder.decode();
+
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+    numBytesDecoded += len;
+    if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+        cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+        cachedTextDecoder.decode();
+        numBytesDecoded = len;
+    }
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+
+function getStringFromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return decodeText(ptr, len);
+}
+
+function dropObject(idx) {
+    if (idx < 132) return;
+    heap[idx] = heap_next;
+    heap_next = idx;
+}
+
+function takeObject(idx) {
+    const ret = getObject(idx);
+    dropObject(idx);
+    return ret;
+}
+
+function passArray8ToWasm0(arg, malloc) {
+    const ptr = malloc(arg.length * 1, 1) >>> 0;
+    getUint8ArrayMemory0().set(arg, ptr / 1);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+/**
+ * @param {Uint8Array} image_data
+ * @param {number} original_width
+ * @param {number} original_height
+ * @param {number} target_width
+ * @param {number} target_height
+ * @param {number} centroids
+ * @param {number} iterations
+ * @returns {ImageResult}
+ */
+export function k_centroid_resize(image_data, original_width, original_height, target_width, target_height, centroids, iterations) {
+    const ptr0 = passArray8ToWasm0(image_data, wasm.__wbindgen_export_1);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.k_centroid_resize(ptr0, len0, original_width, original_height, target_width, target_height, centroids, iterations);
+    return ImageResult.__wrap(ret);
+}
+
+/**
+ * @param {Uint8Array} data
+ * @param {number} width
+ * @param {number} height
+ * @param {number} target_width
+ * @param {number} target_height
+ * @param {number} centroids
+ * @param {number} iterations
+ * @returns {any}
+ */
+export function process_image(data, width, height, target_width, target_height, centroids, iterations) {
+    const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_export_1);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.process_image(ptr0, len0, width, height, target_width, target_height, centroids, iterations);
+    return takeObject(ret);
+}
+
+const ImageResultFinalization = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(ptr => wasm.__wbg_imageresult_free(ptr >>> 0, 1));
+
+export class ImageResult {
+
+    static __wrap(ptr) {
+        ptr = ptr >>> 0;
+        const obj = Object.create(ImageResult.prototype);
+        obj.__wbg_ptr = ptr;
+        ImageResultFinalization.register(obj, obj.__wbg_ptr, obj);
+        return obj;
+    }
+
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+        ImageResultFinalization.unregister(this);
+        return ptr;
+    }
+
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_imageresult_free(ptr, 0);
+    }
+    /**
+     * @returns {number}
+     */
+    get width() {
+        const ret = wasm.__wbg_get_imageresult_width(this.__wbg_ptr);
+        return ret >>> 0;
+    }
+    /**
+     * @param {number} arg0
+     */
+    set width(arg0) {
+        wasm.__wbg_set_imageresult_width(this.__wbg_ptr, arg0);
+    }
+    /**
+     * @returns {number}
+     */
+    get height() {
+        const ret = wasm.__wbg_get_imageresult_height(this.__wbg_ptr);
+        return ret >>> 0;
+    }
+    /**
+     * @param {number} arg0
+     */
+    set height(arg0) {
+        wasm.__wbg_set_imageresult_height(this.__wbg_ptr, arg0);
+    }
+    /**
+     * @returns {Uint8Array}
+     */
+    get data() {
+        try {
+            const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
+            wasm.imageresult_data(retptr, this.__wbg_ptr);
+            var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
+            var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
+            var v1 = getArrayU8FromWasm0(r0, r1).slice();
+            wasm.__wbindgen_export_3(r0, r1 * 1, 1);
+            return v1;
+        } finally {
+            wasm.__wbindgen_add_to_stack_pointer(16);
+        }
+    }
+}
+if (Symbol.dispose) ImageResult.prototype[Symbol.dispose] = ImageResult.prototype.free;
+
+const EXPECTED_RESPONSE_TYPES = new Set(['basic', 'cors', 'default']);
+
+async function __wbg_load(module, imports) {
+    if (typeof Response === 'function' && module instanceof Response) {
+        if (typeof WebAssembly.instantiateStreaming === 'function') {
+            try {
+                return await WebAssembly.instantiateStreaming(module, imports);
+
+            } catch (e) {
+                const validResponse = module.ok && EXPECTED_RESPONSE_TYPES.has(module.type);
+
+                if (validResponse && module.headers.get('Content-Type') !== 'application/wasm') {
+                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+
+                } else {
+                    throw e;
+                }
+            }
+        }
+
+        const bytes = await module.arrayBuffer();
+        return await WebAssembly.instantiate(bytes, imports);
+
+    } else {
+        const instance = await WebAssembly.instantiate(module, imports);
+
+        if (instance instanceof WebAssembly.Instance) {
+            return { instance, module };
+
+        } else {
+            return instance;
+        }
+    }
+}
+
+function __wbg_get_imports() {
+    const imports = {};
+    imports.wbg = {};
+    imports.wbg.__wbg_length_6bb7e81f9d7713e4 = function(arg0) {
+        const ret = getObject(arg0).length;
+        return ret;
+    };
+    imports.wbg.__wbg_new_19c25a3f2fa63a02 = function() {
+        const ret = new Object();
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbg_newwithlength_a167dcc7aaa3ba77 = function(arg0) {
+        const ret = new Uint8Array(arg0 >>> 0);
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbg_set_1353b2a5e96bc48c = function(arg0, arg1, arg2) {
+        getObject(arg0).set(getArrayU8FromWasm0(arg1, arg2));
+    };
+    imports.wbg.__wbg_set_453345bcda80b89a = function() { return handleError(function (arg0, arg1, arg2) {
+        const ret = Reflect.set(getObject(arg0), getObject(arg1), getObject(arg2));
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_wbindgendebugstring_99ef257a3ddda34d = function(arg0, arg1) {
+        const ret = debugString(getObject(arg1));
+        const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_export_1, wasm.__wbindgen_export_2);
+        const len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
+    imports.wbg.__wbg_wbindgenthrow_451ec1a8469d7eb6 = function(arg0, arg1) {
+        throw new Error(getStringFromWasm0(arg0, arg1));
+    };
+    imports.wbg.__wbindgen_cast_2241b6af4c4b2941 = function(arg0, arg1) {
+        // Cast intrinsic for `Ref(String) -> Externref`.
+        const ret = getStringFromWasm0(arg0, arg1);
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbindgen_cast_d6cd19b81560fd6e = function(arg0) {
+        // Cast intrinsic for `F64 -> Externref`.
+        const ret = arg0;
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
+        takeObject(arg0);
+    };
+
+    return imports;
+}
+
+function __wbg_init_memory(imports, memory) {
+
+}
+
+function __wbg_finalize_init(instance, module) {
+    wasm = instance.exports;
+    __wbg_init.__wbindgen_wasm_module = module;
+    cachedDataViewMemory0 = null;
+    cachedUint8ArrayMemory0 = null;
+
+
+
+    return wasm;
+}
+
+function initSync(module) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (typeof module !== 'undefined') {
+        if (Object.getPrototypeOf(module) === Object.prototype) {
+            ({module} = module)
+        } else {
+            console.warn('using deprecated parameters for `initSync()`; pass a single object instead')
+        }
+    }
+
+    const imports = __wbg_get_imports();
+
+    __wbg_init_memory(imports);
+
+    if (!(module instanceof WebAssembly.Module)) {
+        module = new WebAssembly.Module(module);
+    }
+
+    const instance = new WebAssembly.Instance(module, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+async function __wbg_init(module_or_path) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (typeof module_or_path !== 'undefined') {
+        if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
+            ({module_or_path} = module_or_path)
+        } else {
+            console.warn('using deprecated parameters for the initialization function; pass a single object instead')
+        }
+    }
+
+    if (typeof module_or_path === 'undefined') {
+        module_or_path = new URL('k_centroid_scaler_bg.wasm', import.meta.url);
+    }
+    const imports = __wbg_get_imports();
+
+    if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {
+        module_or_path = fetch(module_or_path);
+    }
+
+    __wbg_init_memory(imports);
+
+    const { instance, module } = await __wbg_load(await module_or_path, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+export { initSync };
+export default __wbg_init;

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "k-centroid-scaler",
+  "type": "module",
+  "version": "1.0.0",
+  "files": [
+    "k_centroid_scaler_bg.wasm",
+    "k_centroid_scaler.js"
+  ],
+  "main": "k_centroid_scaler.js",
+  "sideEffects": [
+    "./snippets/*"
+  ]
+}