perf: Increase sampling speed

qq15725 · May 12, 2023 · 483ac66 · 483ac66 · vercel · May 12, 2023
1 parent 2a98604
commit 483ac66
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 19 deletions.
diff --git 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
@@ -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) {