fix: Finding closest color when remap during animated GIF decoding

yegor-pelykh · Apr 12, 2024 · fc30ff1 · fc30ff1
1 parent 2789118
commit fc30ff1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/src/formats/gif-decoder.ts b/src/formats/gif-decoder.ts
@@ -731,7 +731,7 @@ export class GifDecoder implements Decoder {
         ) {
           if (frame.colorMap !== undefined) {
             const lp = lastImage.palette!;
-            const remapColors = new Map<number, number | undefined>();
+            const remapColors = new Map<number, number>();
             for (let ci = 0; ci < colorMap.numColors; ++ci) {
               const nc = colorMap.findColor(
                 lp.getRed(ci),
@@ -745,8 +745,8 @@ export class GifDecoder implements Decoder {
             const lastBytes = lastImage.toUint8Array();
             for (let i = 0, l = nextBytes.length; i < l; ++i) {
               const lc = lastBytes[i];
-              const nc = remapColors.get(lc);
-              if (nc !== undefined) {
+              const nc = remapColors.get(lc)!;
+              if (nc !== -1) {
                 nextBytes[i] = nc;
               }
             }

diff --git a/src/formats/gif/gif-color-map.ts b/src/formats/gif/gif-color-map.ts
@@ -62,23 +62,28 @@ export class GifColorMap {
     this._palette.setRgb(index, r, g, b);
   }
 
-  public findColor(
-    r: number,
-    g: number,
-    b: number,
-    a: number
-  ): number | undefined {
+  public findColor(r: number, g: number, b: number, a: number): number {
+    let closestDistance: number = -1;
+    let closestIndex: number = -1;
     for (let i = 0; i < this._numColors; ++i) {
-      if (
-        this._palette.getRed(i) === r &&
-        this._palette.getGreen(i) === g &&
-        this._palette.getBlue(i) === b &&
-        this._palette.getAlpha(i) === a
-      ) {
+      const pr = this._palette.getRed(i);
+      const pg = this._palette.getGreen(i);
+      const pb = this._palette.getBlue(i);
+      const pa = this._palette.getAlpha(i);
+      if (pr === r && pg === g && pb === b && pa === a) {
         return i;
       }
+      const dr = r - pr;
+      const dg = g - pg;
+      const db = b - pb;
+      const da = a - pa;
+      const d2 = dr * dr + dg * dg + db * db + da * da;
+      if (closestIndex === -1 || d2 < closestDistance) {
+        closestIndex = i;
+        closestDistance = d2;
+      }
     }
-    return undefined;
+    return closestIndex;
   }
 
   public getRed(color: number): number {