depixel 1.0.1 → 1.0.3

package/README.md

@@ -7,9 +7,10 @@ Based on the following paper:
 And the [source code](https://github.com/falichs/Depixelizing-Pixel-Art-on-GPUs) included with this paper:
 * [Depixelizing Pixel Art on GPUs](https://www.cg.tuwien.ac.at/research/publications/2014/KREUZER-2014-DPA/) by Felix Kreuzer
 
-Improvements upon original
+Improvements upon original GPU version:
 * Add a threshold parameter to adjust how close two colors need to be to be consider similar
 * Better handle alpha channels (treat as dissimilar from non-transparent pixels)
+* Fix stretching/scaling due to texel misalignment
 
 Notes
 * Original GPU code is MIT licensed, the same license may apply here, all original code in this project is additionally released under the MIT License

package/lib.js

@@ -80,6 +80,16 @@ function fetchPixelRGBA(src, x, y) {
   return [d[idx] / 255, d[idx + 1] / 255, d[idx + 2] / 255, d[idx + 3] / 255];
 }
 
+function fetchPixelRGBA8(src, x, y) {
+  const w = src.width;
+  const h = src.height;
+  const cx = clampInt(x, 0, w - 1);
+  const cy = clampInt(y, 0, h - 1);
+  const idx = pixelIndex(cx, cy, w);
+  const d = src.data;
+  return [d[idx], d[idx + 1], d[idx + 2], d[idx + 3]];
+}
+
 function isSimilar(a, b, threshold) {
   const yA = 0.299 * a[0] + 0.587 * a[1] + 0.114 * a[2];
   const uA = 0.493 * (a[2] - yA);
@@ -89,6 +99,11 @@ function isSimilar(a, b, threshold) {
   const vB = 0.877 * (b[0] - yB);
   const t = Math.max(0, Math.min(255, threshold | 0)) / 255.0;
   if (Math.abs(a[3] - b[3]) <= (32.0/255) * t) {
+    if (a[3] + b[3] <= (32.0/255) * t) {
+      // treat all alpha=0 pixels as similar, regardless of color
+      // note: need an option for this if processing images with masks or premultiplied alpha
+      return true;
+    }
     if (Math.abs(yA - yB) <= (48.0 / 255.0) * t) {
       if (Math.abs(uA - uB) <= (7.0 / 255.0) * t) {
         if (Math.abs(vA - vB) <= (6.0 / 255.0) * t) {
@@ -1423,8 +1438,8 @@ function gaussRasterize(src, sim, cell, positions, outW, outH) {
     for (let ox = 0; ox < outW; ox++) {
       let influencingPixels = [true, true, true, true];
       const cellSpaceCoords = [
-        (w - 1) * (ox / (outW - 1)),
-        (h - 1) * (oy / (outH - 1)),
+        (w * (ox + 0.5) / outW) - 0.5 + 0.00001,
+        (h * (oy + 0.5) / outH) - 0.5 + 0.00001,
       ];
       const fragmentBaseKnotIndex = (2 * Math.floor(cellSpaceCoords[0]) + Math.floor(cellSpaceCoords[1]) * 2 * (w - 1)) | 0;
       const node0flags = cell.flags[fragmentBaseKnotIndex] | 0;
@@ -1763,10 +1778,13 @@ function gaussRasterize(src, sim, cell, positions, outW, outH) {
 
       const outIdx = (oy * outW + ox) * 4;
       if (weightSum === 0) {
-        out[outIdx] = 0;
-        out[outIdx + 1] = 0;
-        out[outIdx + 2] = 0;
-        out[outIdx + 3] = 255;
+        const nx = Math.round(cellSpaceCoords[0]);
+        const ny = Math.round(cellSpaceCoords[1]);
+        const col = fetchPixelRGBA8(src, nx, ny);
+        out[outIdx] = col[0];
+        out[outIdx + 1] = col[1];
+        out[outIdx + 2] = col[2];
+        out[outIdx + 3] = col[3];
       } else {
         out[outIdx] = clampInt(Math.round((colorSum[0] / weightSum) * 255), 0, 255);
         out[outIdx + 1] = clampInt(Math.round((colorSum[1] / weightSum) * 255), 0, 255);
@@ -1815,30 +1833,18 @@ function scaleImage(src, opts) {
 
   const borderPx = Math.max(0, Math.round(opts.borderPx || 0));
   if (borderPx > 0) {
-    const doInvisBorder = Math.min(
-      src.data[3],
-      src.data[(inW - 1) * 4 + 3],
-      src.data[(inH - 1) * inW * 4 + 3],
-      src.data[((inH - 1) * inW + (inW - 1)) * 4 + 3],
-    ) < 255;
     const padW = inW + 2 * borderPx;
     const padH = inH + 2 * borderPx;
     const padData = new Uint8Array(padW * padH * 4);
-    // fill magenta border (invisible if original image appears to have invisible edges)
+    // copy src into center, expand into borders
     for (let y = 0; y < padH; y++) {
-      for (let x = 0; x < padW; x++) {
-        const idx = (y * padW + x) * 4;
-        padData[idx] = doInvisBorder ? 0 : 255;
-        padData[idx + 1] = 0;
-        padData[idx + 2] = doInvisBorder ? 0 : 255;
-        padData[idx + 3] = doInvisBorder ? 0 : 255;
-      }
-    }
-    // copy src into center
-    for (let y = 0; y < inH; y++) {
-      const srcRow = y * inW * 4;
-      const dstRow = (y + borderPx) * padW * 4 + borderPx * 4;
+      const srcRow = Math.min(inH - 1, Math.max(0, y - borderPx)) * inW * 4;
+      const dstRow = y * padW * 4 + borderPx * 4;
       padData.set(src.data.subarray(srcRow, srcRow + inW * 4), dstRow);
+      for (let ii = 0; ii < borderPx * 4; ++ii) {
+        padData[dstRow - borderPx * 4 + ii] = src.data[srcRow + ii % 4];
+        padData[dstRow + inW * 4 + ii] = src.data[srcRow + ii % 4];
+      }
     }
     const scale = outH / inH;
     const outHpad = Math.max(1, Math.round(padH * scale));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "depixel",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Depixelizing Pixel Art by Kopf-Lischinski and Felix Kreuzer for Node.js",
   "main": "lib.js",
   "keywords": [