优化视频流

src/views/weightManage/index.vue

@@ -822,6 +822,7 @@ const initCamera1 = () => {
     }
 
     // 修改前端代码，处理黑白相机的视频流数据
+    // 修改前端代码，处理压缩后的JPEG图像数据
     camera1Ws.value.onmessage = (event) => {
       try {
         if (camera1Canvas.value && event.data instanceof Blob) {
@@ -848,34 +849,37 @@ const initCamera1 = () => {
                 return;
               }
 
-              // 提取图像数据
+              // 提取压缩的图像数据
               const imageDataStart = 8;
               const imageDataLength = uint8Array.length - imageDataStart;
               const imageData = uint8Array.subarray(imageDataStart);
 
-              // 设置canvas尺寸
+              // 创建Blob对象并转换为URL
-              camera1Canvas.value.width = width;
+              const blob = new Blob([imageData], { type: 'image/jpeg' });
-              camera1Canvas.value.height = height;
+              const imageUrl = URL.createObjectURL(blob);
 
-              // 获取canvas上下文
+              // 创建Image对象并显示
-              const ctx = camera1Canvas.value.getContext('2d');
+              const img = new Image();
-              if (ctx) {
+              img.onload = () => {
-                // 创建ImageData对象
+                // 设置canvas尺寸
-                const canvasImageData = ctx.createImageData(width, height);
+                camera1Canvas.value.width = width;
+                camera1Canvas.value.height = height;
 
-                // 对于黑白相机，数据是单通道灰度格式
+                // 获取canvas上下文
-                // 将单通道灰度数据转换为RGBA格式
+                const ctx = camera1Canvas.value.getContext('2d');
-                for (let i = 0, j = 0; i < imageData.length && j < canvasImageData.data.length; i++, j += 4) {
+                if (ctx) {
-                  const gray = imageData[i];
+                  // 绘制图像
-                  canvasImageData.data[j] = gray;     // R
+                  ctx.drawImage(img, 0, 0, width, height);
-                  canvasImageData.data[j + 1] = gray; // G
-                  canvasImageData.data[j + 2] = gray; // B
-                  canvasImageData.data[j + 3] = 255;  // A (不透明)
                 }
 
-                // 将ImageData绘制到canvas上
+                // 释放URL对象
-                ctx.putImageData(canvasImageData, 0, 0);
+                URL.revokeObjectURL(imageUrl);
-              }
+              };
+              img.onerror = () => {
+                console.error('图像加载失败');
+                URL.revokeObjectURL(imageUrl);
+              };
+              img.src = imageUrl;
             }
           };
           reader.readAsArrayBuffer(event.data);