fix: image blurhash logic

Signed-off-by: Innei <i@innei.in>
sysfox · Aug 25, 2024 · bf54dd4 · bf54dd4
1 parent c13b812
commit bf54dd4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/components/drawer/components/image-detail-section.tsx b/src/components/drawer/components/image-detail-section.tsx
@@ -14,7 +14,7 @@ import {
 import type { Image as ImageModel } from '~/models/base'
 import type { PropType } from 'vue'
 
-import { getBlurHash, getDominantColor } from '~/utils/image'
+import { encodeImageToBlurhash, getDominantColor } from '~/utils/image'
 import { isVideoExt, pickImagesFromMarkdown } from '~/utils/markdown'
 
 export const ImageDetailSection = defineComponent({
@@ -130,7 +130,7 @@ export const ImageDetailSection = defineComponent({
                   src: item.src,
                   type: ext,
                   accent: getDominantColor($image),
-                  blurHash: getBlurHash($image),
+                  blurHash: encodeImageToBlurhash($image),
                 })
               })
               $image.onerror = (err) => {

diff --git a/src/utils/image.ts b/src/utils/image.ts
@@ -44,3 +44,17 @@ export function getBlurHash(imageObject: HTMLImageElement) {
 
   return encode(pixels, 32, 32, componentX, componentY)
 }
+
+const getImageData = (image: HTMLImageElement) => {
+  const canvas = document.createElement('canvas')
+  canvas.width = image.width
+  canvas.height = image.height
+  const context = canvas.getContext('2d')!
+  context.drawImage(image, 0, 0)
+  return context.getImageData(0, 0, image.width, image.height)
+}
+
+export const encodeImageToBlurhash = (image: HTMLImageElement) => {
+  const imageData = getImageData(image)
+  return encode(imageData.data, imageData.width, imageData.height, 4, 4)
+}