refactor: canvas

Author: sukbearai

app/pages/v-screen/data/web-camera.vue

@@ -21,7 +21,7 @@ function loadSequenceFrame() {
     const elapsed = timestamp - lastFrameTime
 
     if (elapsed >= frameDuration) {
-      drawSequenceFrame(`/sequence-frame/${frameCount}.jpg`)
+      drawSequenceFrame(`/sequence-frame/${frameCount}.jpg`, canvasRef.value!)
       frameCount++
       lastFrameTime = timestamp - (elapsed % frameDuration)
 
@@ -36,50 +36,6 @@ function loadSequenceFrame() {
   requestAnimationFrame(animate)
 }
 
-function drawSequenceFrame(url: string) {
-  const canvas = canvasRef.value
-  if (!canvas) {
-    console.error('Canvas element not found!')
-    return
-  }
-
-  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
-
-  const img = new Image()
-  img.onload = () => {
-    // 设置canvas尺寸
-    canvas.width = canvas.clientWidth
-    canvas.height = canvas.clientHeight
-
-    // 图片比例和canvas比例
-    const imgRatio = img.width / img.height
-    const canvasRatio = canvas.width / canvas.height
-
-    let drawWidth, drawHeight, drawX, drawY
-
-    // 根据比例确定绘制尺寸和位置
-    if (imgRatio > canvasRatio) {
-      drawWidth = canvas.width
-      drawHeight = canvas.width / imgRatio
-      drawX = 0
-      drawY = (canvas.height - drawHeight) / 2
-    }
-    else {
-      drawWidth = canvas.height * imgRatio
-      drawHeight = canvas.height
-      drawX = (canvas.width - drawWidth) / 2
-      drawY = 0
-    }
-
-    // 清除之前的内容
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-    // 绘制图片
-    ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight - 15)
-  }
-  img.src = url
-}
-
 // function drawSequenceFrameOnResize() {
 //   if (imgArr.value.length > 0) {
 //     drawKeyFrame(imgArr.value[0].src); // 当窗口大小变化时重新绘制图片

app/pages/v-screen/index/web-camera.vue

@@ -6,9 +6,9 @@ const containerRef = ref<HTMLCanvasElement | null>(null)
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 
 const { sendMessageToCpp } = useWebChannel({
-  onDataUpdated(data: any) {
+  async onDataUpdated(data: any) {
     window.console.log('这是QT数据:', data)
-    drawSequenceFrame(data.img)
+    await drawSequenceFrame(data, canvasRef.value!)
     sendMessageToCpp('这是JS数据')
   },
 })
@@ -62,50 +62,6 @@ const { sendMessageToCpp } = useWebChannel({
 //   requestAnimationFrame(animate)
 // }
 
-function drawSequenceFrame(url: string) {
-  const canvas = canvasRef.value
-  if (!canvas) {
-    console.error('Canvas element not found!')
-    return
-  }
-
-  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
-
-  const img = new Image()
-  img.onload = () => {
-    // 设置canvas尺寸
-    canvas.width = canvas.clientWidth
-    canvas.height = canvas.clientHeight
-
-    // 图片比例和canvas比例
-    const imgRatio = img.width / img.height
-    const canvasRatio = canvas.width / canvas.height
-
-    let drawWidth, drawHeight, drawX, drawY
-
-    // 根据比例确定绘制尺寸和位置
-    if (imgRatio > canvasRatio) {
-      drawWidth = canvas.width
-      drawHeight = canvas.width / imgRatio
-      drawX = 0
-      drawY = (canvas.height - drawHeight) / 2
-    }
-    else {
-      drawWidth = canvas.height * imgRatio
-      drawHeight = canvas.height
-      drawX = (canvas.width - drawWidth) / 2
-      drawY = 0
-    }
-
-    // 清除之前的内容
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-    // 绘制图片
-    ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight - 15)
-  }
-  img.src = url
-}
-
 // function drawSequenceFrameOnResize() {
 //   if (imgArr.value.length > 0) {
 //     drawKeyFrame(imgArr.value[0].src); // 当窗口大小变化时重新绘制图片

app/utils/canvas.ts

@@ -0,0 +1,51 @@
+export function drawSequenceFrame(url: string, canvas: HTMLCanvasElement): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (!canvas) {
+      reject(new Error('Canvas element not found!'))
+      return
+    }
+
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+
+    const img = new Image()
+    img.onload = () => {
+      // 设置canvas尺寸
+      canvas.width = canvas.clientWidth
+      canvas.height = canvas.clientHeight
+
+      // 图片比例和canvas比例
+      const imgRatio = img.width / img.height
+      const canvasRatio = canvas.width / canvas.height
+
+      let drawWidth, drawHeight, drawX, drawY
+
+      // 根据比例确定绘制尺寸和位置
+      if (imgRatio > canvasRatio) {
+        drawWidth = canvas.width
+        drawHeight = canvas.width / imgRatio
+        drawX = 0
+        drawY = (canvas.height - drawHeight) / 2
+      }
+      else {
+        drawWidth = canvas.height * imgRatio
+        drawHeight = canvas.height
+        drawX = (canvas.width - drawWidth) / 2
+        drawY = 0
+      }
+
+      // 清除之前的内容
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      // 绘制图片
+      ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight - 15)
+
+      resolve()
+    }
+
+    img.onerror = () => {
+      reject(new Error('Failed to load image'))
+    }
+
+    img.src = url
+  })
+}

app/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './date'
 export * from './storage'
 export * from './mock'
+export * from './canvas'