feat: 增加获取水印功能

h5/src/components/vionPlayer/index.vue

@@ -3,7 +3,8 @@
 </template>
 
 <script>
-import { watermarkBase64 } from './data';
+// import { watermarkBase64 } from './data';
+import { getWatermarkCanvasImg } from './utils';
 
 export default {
   name: 'VionPlayer',
@@ -61,15 +62,16 @@ export default {
         controlAutoHide: this.controlAutoHide,
         supportDblclickFullscreen: false,
         showBandwidth: false, // 显示网速
-        watermarkConfig: {
+        // TODO: 水印功能暂不可用
+        /* watermarkConfig: {
           image: {
-            src: watermarkBase64,
+            src: this.getWatermarkBase64(),
             width: 150,
             height: 48
           },
           right: 10,
           top: 30
-        },
+        }, */
         operateBtns: {
           fullscreen: true,
           screenshot: false,
@@ -107,6 +109,10 @@ export default {
         this.$emit('ptz-control', arrow);
       });
     },
+    getWatermarkBase64() {
+      const data = getWatermarkCanvasImg(150, 48, '文安智能');
+      console.log('getWatermarkBase64', data);
+    },
 
     // 暴露方法
     play(url) {
@@ -129,9 +135,10 @@ export default {
         });
       }
     },
-
     screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
-      return this._jessibuca.screenshot(filename, format, quality, type);
+      const originData = this._jessibuca.screenshot(filename, format, quality, type);
+      // TODO: 动态获取宽高
+      return getWatermarkCanvasImg(800, 480, '文安智能', originData);
     },
   },
 }

h5/src/components/vionPlayer/utils.js

@@ -0,0 +1,55 @@
+export function getWatermarkCanvasImg(width, height, text, imageData) {
+  const canvas = document.createElement('canvas');
+  //  若不设置宽、高，无法渲染内容
+  canvas.width = width;
+  canvas.height = height;
+  // canvas.height = this.height - 40; // 40为底部工具条
+  canvas.className = 'watermark';
+  console.log('createCanvas', canvas);
+
+  // 获取 Canvas 上下文
+  const ctx = canvas.getContext('2d');
+
+  // 在 Canvas 上绘制原始图片
+  if (image) {
+    const imageEl = new Image();
+    imageEl.src = imageData;
+    ctx.drawImage(imageEl, 0, 0);
+  }
+
+  // 绘制水印文本
+  ctx.font = '24px Arial';
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
+
+  // 定义水印内容
+  const watermarkText = text;
+
+  // 定义水印间隔和边距
+  // TODO: 未兼容移动端
+  const watermarkIntervalX = 220; // 水印之间的水平间隔
+  const watermarkIntervalY = 220; // 水印之间的垂直间隔
+  const watermarkMarginX = 50; // 水印距离左边的边距
+  const watermarkMarginY = 180; // 水印距离顶部的边距
+
+  // 循环绘制水印
+  for (let x = watermarkMarginX; x < canvas.width; x += watermarkIntervalX) {
+    for (let y = watermarkMarginY; y < canvas.height; y += watermarkIntervalY) {
+      // 保存当前绘图状态以便恢复
+      ctx.save();
+
+      // 将坐标原点移动到水印位置
+      ctx.translate(x, y);
+
+      // 旋转文本
+      ctx.rotate(-Math.PI / 4); // 旋转-45度（以弧度表示）
+
+      // 绘制水印文本
+      ctx.fillText(watermarkText, 0, 0);
+
+      // 恢复绘图状态
+      ctx.restore();
+    }
+  }
+
+  return canvas.toDataURL('image/png');
+}

h5/src/views/player/vionPlayerDemo.vue

@@ -21,6 +21,10 @@
       <button @click="handleDestroy">销毁</button>
       <button @click="handleScreenshot">抓拍</button>
     </div>
+
+    <el-dialog title="Image" :visible.sync="dialogVisible" width="90%">
+      <img v-if="dialogVisible" :src="base64Url" alt="base64" />
+    </el-dialog>
   </div>
 </template>
 
@@ -37,6 +41,9 @@ export default {
       playerType: 'live',
       datetimeRange: [],
 
+      dialogVisible: false,
+      base64Url: '',
+
       // 播放器相关
       playUrl: 'https://rtmp01open.ys7.com:9188/v3/openlive/F16423875_1_1.flv?expire=1695279265&id=624619383494283264&t=75ae0260690eedd9d493ab1caf716fe3f10a3e4c9b6df59135e032d437cf187a&ev=100&supportH265=1',
     }
@@ -59,6 +66,8 @@ export default {
     handleScreenshot() {
       const result = this.$refs.vionPlayer.screenshot();
       console.log('handleScreenshot', result);
+      this.base64Url = result;
+      this.dialogVisible = true;
     },
     handlePause() {
       this.$refs.vionPlayer.pause();
@@ -104,5 +113,9 @@ export default {
       margin-right: 10px;
     }
   }
+  ::v-deep(.el-dialog__body) {
+    text-align: center;
+    background-color: #CCC;
+  }
 }
 </style>