feat: Add WebGL-based image processing (encodeImageToBlurhashWebgl) for better performance (#983)

Author: grtsinry43

src/components/drawer/components/image-detail-section.tsx

@@ -10,11 +10,16 @@ import {
   NFormItem,
   NInput,
   NInputNumber,
+  NSwitch,
 } from 'naive-ui'
 import type { Image as ImageModel } from '~/models/base'
 import type { PropType } from 'vue'
 
-import { encodeImageToBlurhash, getDominantColor } from '~/utils/image'
+import {
+  encodeImageToBlurhash,
+  encodeImageToBlurhashWebgl,
+  getDominantColor,
+} from '~/utils/image'
 import { isVideoExt, pickImagesFromMarkdown } from '~/utils/markdown'
 
 export const ImageDetailSection = defineComponent({
@@ -39,6 +44,8 @@ export const ImageDetailSection = defineComponent({
   setup(props) {
     const loading = ref(false)
 
+    const useWebglFlag = ref(false)
+
     const originImageMap = computed(() => {
       const map = new Map<string, ImageModel>()
       props.images.forEach((image) => {
@@ -130,7 +137,9 @@ export const ImageDetailSection = defineComponent({
                   src: item.src,
                   type: ext,
                   accent: getDominantColor($image),
-                  blurHash: encodeImageToBlurhash($image),
+                  blurHash: useWebglFlag
+                    ? encodeImageToBlurhashWebgl($image)
+                    : encodeImageToBlurhash($image),
                 })
               })
               $image.onerror = (err) => {
@@ -151,7 +160,7 @@ export const ImageDetailSection = defineComponent({
         if (task.status === 'fulfilled') nextImageDimensions.push(task.value)
         else {
           message.warning(
-            `获取图片信息失败：${task.reason.src}: ${task.reason.err}`,
+            ` 获取图片信息失败：${task.reason.src}: ${task.reason.err}`,
           )
         }
       })
@@ -176,7 +185,16 @@ export const ImageDetailSection = defineComponent({
             自动修正
           </NButton>
         </div>
-
+        <div class="mt-2 flex">
+          <NSwitch
+            value={useWebglFlag.value}
+            onUpdateValue={(e) => void (useWebglFlag.value = e)}
+          />
+          <div class="ml-2">
+            {' '}
+            使用 Webgl 加速图片处理（实验性，调用 GPU 计算）
+          </div>
+        </div>
         <NCollapse accordion class="mt-4">
           {images.value.map((image: ImageModel, index: number) => {
             return (
@@ -233,7 +251,7 @@ export const ImageDetailSection = defineComponent({
                         }
                         props.images[index].accent = n
                       }}
-                    ></NColorPicker>
+                    />
                   </NFormItem>
 
                   <NFormItem label="Blur Preview">
@@ -305,7 +323,7 @@ const BlurHashPreview = defineComponent({
         class="bg-cover bg-center"
         height={32}
         width={32}
-      ></canvas>
+      />
     )
   },
 })

src/utils/image.ts

@@ -58,3 +58,65 @@ export const encodeImageToBlurhash = (image: HTMLImageElement) => {
   const imageData = getImageData(image)
   return encode(imageData.data, imageData.width, imageData.height, 4, 4)
 }
+
+export const encodeImageToBlurhashWebgl = (image: HTMLImageElement) => {
+  const canvas = document.createElement('canvas')
+  const gl = (canvas.getContext('webgl') ||
+    canvas.getContext('experimental-webgl')) as WebGLRenderingContext
+
+  if (!gl) {
+    throw new Error('WebGL not supported')
+  }
+
+  canvas.width = image.naturalWidth
+  canvas.height = image.naturalHeight
+
+  // Create a texture and bind image
+  const texture = gl.createTexture()
+  gl.bindTexture(gl.TEXTURE_2D, texture)
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+
+  // Create a framebuffer and attach the texture
+  const framebuffer = gl.createFramebuffer()
+  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer)
+  gl.framebufferTexture2D(
+    gl.FRAMEBUFFER,
+    gl.COLOR_ATTACHMENT0,
+    gl.TEXTURE_2D,
+    texture,
+    0,
+  )
+
+  // Read the pixels
+  const pixels = new Uint8Array(image.naturalWidth * image.naturalHeight * 4)
+  gl.readPixels(
+    0,
+    0,
+    image.naturalWidth,
+    image.naturalHeight,
+    gl.RGBA,
+    gl.UNSIGNED_BYTE,
+    pixels,
+  )
+
+  // Resize the image to 32x32
+  const resizedCanvas = document.createElement('canvas')
+  resizedCanvas.width = 32
+  resizedCanvas.height = 32
+  const resizedCtx = resizedCanvas.getContext('2d')!
+  const imageData = new ImageData(
+    new Uint8ClampedArray(pixels),
+    image.naturalWidth,
+    image.naturalHeight,
+  )
+  resizedCtx.putImageData(imageData, 0, 0)
+  resizedCtx.drawImage(resizedCanvas, 0, 0, 32, 32)
+  const resizedImageData = resizedCtx.getImageData(0, 0, 32, 32)
+
+  // Encode the resized image to BlurHash
+  return encode(resizedImageData.data, 32, 32, 4, 4)
+}