canvas-image-toolkit 1.0.0 → 1.0.1

package/decoder.js

@@ -1,13 +1,17 @@
-
+/**
+ *  Decode a 2D RGBA matrix into pixel data
+ * @param {number[][][]} binary - 2D array of RGBA pixels
+ * @returns {{ data: Uint8ClampedArray, width: number, height: number }}
+ */
 export function decodeImageData(binary){
         const height = binary.length 
         const width = binary[0].length
         const imageData  = new Uint8ClampedArray(width*height*4)
-        for(let y=0; y; y++){
+        for(let y=0; y<height; y++){
             if (binary[y].length !== width) {
                 throw new Error("Invalid binary matrix: inconsistent row width");
             }
-            for(let x=0; x<SIZE; x++){
+            for(let x=0; x<width; x++){
                 const i = (y*width+x)*4
                 const [r, g, b, alpha] = binary[y][x] 
                 imageData[i] = r
@@ -20,5 +24,6 @@ export function decodeImageData(binary){
             data:imageData,
             width,
             height
-        }) 
+        })
+    
 }

package/encoder.js

@@ -1,12 +1,21 @@
+
+/**
+ * @param {Uint8ClampedArray} imageData 
+ * @param {number} width 
+ * @param {number} height 
+ * @returns {number[][][]}
+ */
+
 export function encodeImageData(imageData, width, height){
         const Binary = []
+        const data = imageData
         for(let y=0; y<height; y++){
             let row = []
             for(let x =0; x<width; x++){
-                const i = (y * SIZE + x) * 4;
-                const r = imageData[i];
-                const g = imageData[i + 1];
-                const b = imageData[i + 2];
+                const i = (y * width + x) * 4;
+                const r = data[i];
+                const g = data[i + 1];
+                const b = data[i + 2];
                 const alpha = data[i+3]
                 if(alpha<50){
                      row.push([0,0,0,0]);

package/filter/blur.js

@@ -1,28 +1,58 @@
 /**
- * Convert image pixels to grayscale (in-place)
+ * Gaussian blur (separable, high quality)
  * @param {Uint8ClampedArray} pixels
+ * @param {number} width
+ * @param {number} height
+ * @param {number} radius
  */
-export function bLur(pixels){
-    let copy = new Uint8ClampedArray(pixels)
-            for(let y = 1; y<=canvas.height; y++){
-                for(let x = 1; x<=canvas.width; x++){
-                let r = 0, g = 0, b = 0;
-                let count = 0
-                for(let ky = -10; ky<=10; ky++){
-                    for(let kx = -10; kx<=10; kx++){
-                        let py = y + ky
-                        let px = x + kx
-                        let index = (py * canvas.width + px) * 4
-                        r += copy[index]
-                        g += copy[index+1]
-                        b += copy[index+2]
-                        count += 1
-                    }
-                }
-                let i =  (y * canvas.width + x)*4
-                pixels[i] = r/count
-                pixels[i+1] = g/count
-                pixels[i+2] = b/count
+export function gaussianBlur(pixels, width, height, radius = 5) {
+    const kernel = createGaussianKernel(radius);
+    const temp = new Float32Array(pixels.length);
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+
+            let r = 0, g = 0, b = 0, a = 0;
+
+            for (let k = -radius; k <= radius; k++) {
+                const px = Math.min(width - 1, Math.max(0, x + k));
+                const i = (y * width + px) * 4;
+                const w = kernel[k + radius];
+
+                r += pixels[i] * w;
+                g += pixels[i + 1] * w;
+                b += pixels[i + 2] * w;
+                a += pixels[i + 3] * w;
             }
+
+            const idx = (y * width + x) * 4;
+            temp[idx]     = r;
+            temp[idx + 1] = g;
+            temp[idx + 2] = b;
+            temp[idx + 3] = a;
         }
-}
+    }
+
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+
+            let r = 0, g = 0, b = 0, a = 0;
+
+            for (let k = -radius; k <= radius; k++) {
+                const py = Math.min(height - 1, Math.max(0, y + k));
+                const i = (py * width + x) * 4;
+                const w = kernel[k + radius];
+
+                r += temp[i] * w;
+                g += temp[i + 1] * w;
+                b += temp[i + 2] * w;
+                a += temp[i + 3] * w;
+            }
+
+            const idx = (y * width + x) * 4;
+            pixels[idx]     = r;
+            pixels[idx + 1] = g;
+            pixels[idx + 2] = b;
+            pixels[idx + 3] = a;
+        }
+    }
+}

package/filter/generate_ASCII.js

@@ -1,6 +1,9 @@
 /**
  * Convert image pixels to grayscale (in-place)
  * @param {Uint8ClampedArray} pixels
+ * @param {number} width
+ * @param {Object} options
+ * @returns {string}
  */ 
  export function ASCII_generator(pixels, width, option={}){
     const ASCII_CHARS = option.char||["." , ",", ":", "-", "=", "+","*","#","%", "@"]
@@ -10,9 +13,9 @@
     for(let y = 0; y<height; y++){
         for(x =0; x<width; x++){
             let i = (y*width+x)*4
-            const r = imageData[i]
-            const g = imageData[i+1]
-            const b = imageData[i+2]
+            const r = pixels[i]
+            const g = pixels[i+1]
+            const b = pixels[i+2]
 
             const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-image-toolkit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Image encode/decode, filters, ASCII generator using raw ImageData",
   "keywords": [
     "image",
@@ -17,5 +17,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \\\"No tests specified\\\"\""
+  },
+  "dependencies": {
+    "typescript": "^5.9.3"
   }
 }

package/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    // File Layout
+    // "rootDir": "./src",
+    // "outDir": "./dist",
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "module": "nodenext",
+    "target": "esnext",
+    // For nodejs:
+    // "lib": ["esnext"],
+    // "types": ["node"],
+    // and npm install -D @types/node
+
+    // Other Outputs
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+
+    // Style Options
+    // "noImplicitReturns": true,
+    // "noImplicitOverride": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+    // "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+    "strict": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+  }
+}

package/types/canvas.image.toolkit.d.ts

@@ -0,0 +1 @@
+declare module 'canvas-image-toolkit';