✨ Auto match image pixel

packages/core/src/BitmapsGenerator.ts

@@ -7,20 +7,11 @@ import ColoredSvgGenerator, {
   Cursors,
   ThemeConfig
 } from "./SvgHandler/ColoredSvgGenerator";
-import { Frames, PixelDiffRate } from "./types";
+import { Frames } from "./types";
 import { getFrameName } from "./utils/getFrameName";
 import { generateRenderTemplate } from "./utils/htmlTemplate";
 import { matchImages } from "./utils/matchImages";
 
-const pixelDiffRate: PixelDiffRate = {
-  left_ptr_watch: {
-    rate: 100
-  },
-  wait: {
-    rate: 990
-  }
-};
-
 export class BitmapsGenerator {
   private readonly staticCurs: Cursors;
   private readonly animatedCurs: Cursors;
@@ -159,19 +150,18 @@ export class BitmapsGenerator {
           omitBackground: true,
           encoding: "binary"
         });
-
-        const diff = matchImages({
+        const matched = matchImages({
           img1Buff: frames[firstFrame].buffer,
           img2Buff: newFrame
         });
 
-        const { rate } = pixelDiffRate[cursor];
-        if (!(diff < rate)) {
-          frames[key] = { buffer: newFrame };
-        } else {
+        if (matched) {
           breakRendering = true;
+        } else {
+          frames[key] = { buffer: newFrame };
+          setTimeout(() => {}, 1);
+          index++;
         }
-        index++;
       }
     }
 

packages/core/src/utils/matchImages.ts

@@ -6,14 +6,21 @@ interface MatchImagesArgs {
   img2Buff: Buffer;
 }
 
-export const matchImages = ({ img1Buff, img2Buff }: MatchImagesArgs) => {
+export const matchImages = ({
+  img1Buff,
+  img2Buff
+}: MatchImagesArgs): boolean => {
   const img1 = PNG.sync.read(img1Buff);
   const img2 = PNG.sync.read(img2Buff);
   const { width, height } = img1;
 
   const diff = new PNG({ width, height });
 
-  return pixelmatch(img1.data, img2.data, diff.data, width, height, {
+  const value = pixelmatch(img1.data, img2.data, diff.data, width, height, {
     threshold: 0.25
   });
+
+  console.log(value);
+  if (value <= 400) return true;
+  return false;
 };