From 483ac66b1a32f9123789764eb891c17ad852ed37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=A0=E6=89=8B=E6=8D=A7=E9=B2=9C=E8=8A=B1?=
 <157215725@qq.com>
Date: Fri, 12 May 2023 10:25:56 +0800
Subject: [PATCH] perf: Increase sampling speed

---
 docs/index.html   | 31 +++++++++++++++----------------
 src/add-sample.ts |  6 +++---
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 85acc64..5cc5f1c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -14,6 +14,7 @@
 
   const maxColors = 16 * 16
   const size = Math.sqrt(maxColors)
+  const img = document.querySelector('img')
   const el = document.querySelector('canvas')
   const elContext2d = el.getContext('2d')
   el.width = size
@@ -23,26 +24,24 @@
     maxColors,
   })
 
-  palette.addSample('/example.jpg').then(() => {
-    // eslint-disable-next-line no-console
-    console.time('generate')
-    palette.generate()
-    // eslint-disable-next-line no-console
-    console.timeEnd('generate')
+  // eslint-disable-next-line no-console
+  console.time('addSample')
+  palette.addSample(img)
+  // eslint-disable-next-line no-console
+  console.timeEnd('addSample')
 
-    elContext2d.putImageData(new ImageData(palette.getColors('buffer'), size, size), 0, 0)
+  // eslint-disable-next-line no-console
+  console.time('generate')
+  palette.generate()
+  // eslint-disable-next-line no-console
+  console.timeEnd('generate')
 
-    const colors = palette.getColors('hex')
+  elContext2d.putImageData(new ImageData(palette.getColors('buffer'), size, size), 0, 0)
 
-    // eslint-disable-next-line no-console
-    console.log(palette)
+  const colors = palette.getColors('hex')
 
-    // eslint-disable-next-line no-console
-    console.log(colors)
-
-    // eslint-disable-next-line no-console
-    console.log(palette.findNearestColor('#ffffff'))
-  })
+  // eslint-disable-next-line no-console
+  console.log(palette, colors, palette.findNearestColor('#ffffff'))
 </script>
 </body>
 </html>
diff --git a/src/add-sample.ts b/src/add-sample.ts
index 7808401..3bc2044 100644
--- a/src/add-sample.ts
+++ b/src/add-sample.ts
@@ -50,7 +50,7 @@ export function addSample(
       context2d.clearRect(0, 0, canvas.width, canvas.height)
       canvas.width = img.width
       canvas.height = img.height
-      context2d.drawImage(img, 0, 0)
+      context2d.drawImage(img, 0, 0, canvas.width, canvas.height)
       return addSample(
         context,
         context2d.getImageData(0, 0, img.width, img.height).data,
@@ -64,7 +64,7 @@ export function addSample(
     context2d.clearRect(0, 0, canvas.width, canvas.height)
     canvas.width = typeof source.width === 'number' ? source.width : source.width.baseVal.value
     canvas.height = typeof source.height === 'number' ? source.height : source.height.baseVal.value
-    context2d.drawImage(source, 0, 0)
+    context2d.drawImage(source, 0, 0, canvas.width, canvas.height)
     return addSample(
       context,
       context2d.getImageData(0, 0, canvas.width, canvas.height).data,
@@ -91,7 +91,7 @@ export function addSample(
     }
 
     const srgb = (r << 16) | (g << 8) | b
-    const key = Number(`${ a }${ srgb }`)
+    const key = a * 100000000 + srgb
 
     let index = colorSamplesCache.get(key)
     if (index !== undefined) {