feat: 优化截图水印功能

h5/src/components/vionPlayer/index.vue

@@ -135,11 +135,37 @@ export default {
         });
       }
     },
-    screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
+    screenshot2(filename = '', format = 'png', quality = 0.92, type = 'base64') {
+      // TODO: 必须播放状态，才可获取水印
       const originData = this._jessibuca.screenshot(filename, format, quality, type);
       // TODO: 动态获取宽高
       return getWatermarkCanvasImg(800, 480, '文安智能', originData);
     },
+    screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
+      return new Promise((resolve, reject) => {
+        // 创建一个新的图片对象
+        const image = new Image();
+
+        // 当图像加载完成后执行
+        image.onload = () => {
+          // 创建一个 Canvas 元素
+          const canvas = getWatermarkCanvasImg(800, 480, '文安智能', image);;
+
+          // 将带有水印的 Canvas 转换回 base64
+          const watermarkedBase64 = canvas.toDataURL('image/png');
+
+          // 现在，watermarkedBase64 包含了带有水印的 base64 图像数据
+          // console.log(watermarkedBase64);
+          resolve(watermarkedBase64);
+        };
+        image.error = function() {
+          reject(new Error(null));
+        }
+
+        // 设置图像的 src 属性，加载图像
+        image.src = this._jessibuca.screenshot(filename, format, quality, type);
+      });
+    },
   },
 }
 </script>

h5/src/components/vionPlayer/utils.js

-export function getWatermarkCanvasImg(width, height, text, imageData) {
+export function getWatermarkCanvasImg(width, height, text, image) {
   const canvas = document.createElement('canvas');
   //  若不设置宽、高，无法渲染内容
   canvas.width = width;
@@ -12,9 +12,7 @@ export function getWatermarkCanvasImg(width, height, text, imageData) {
 
   // 在 Canvas 上绘制原始图片
   if (image) {
-    const imageEl = new Image();
-    imageEl.src = imageData;
-    ctx.drawImage(imageEl, 0, 0);
+    ctx.drawImage(image, 0, 0);
   }
 
   // 绘制水印文本
@@ -51,5 +49,6 @@ export function getWatermarkCanvasImg(width, height, text, imageData) {
     }
   }
 
-  return canvas.toDataURL('image/png');
+  return canvas;
+  // return canvas.toDataURL('image/png');
 }

h5/src/views/player/vionPlayerDemo.vue

@@ -64,10 +64,11 @@ export default {
       ];
     },
     handleScreenshot() {
-      const result = this.$refs.vionPlayer.screenshot();
-      console.log('handleScreenshot', result);
-      this.base64Url = result;
-      this.dialogVisible = true;
+      this.$refs.vionPlayer.screenshot().then(data => {
+        console.log('handleScreenshot', data);
+        this.base64Url = data;
+        this.dialogVisible = true;
+      });
     },
     handlePause() {
       this.$refs.vionPlayer.pause();