feat: 增加水印功能

h5/src/components/jPlayer/index.vue

@@ -19,6 +19,10 @@ export default {
       type: Array,
       default: null,
     },
+    watermark: {
+      type: String,
+      default: '',
+    },
     // url 前缀
     prefixUrl: {
       type: String,
@@ -88,14 +92,14 @@ export default {
       iframe.setAttribute('frameborder', 0);
       iframe.setAttribute('name', this.type);
       iframe.setAttribute('src', url);
-      iframe.setAttribute('width', '100%')
-      iframe.setAttribute('height', '100%')
+      iframe.setAttribute('width', '100%');
+      iframe.setAttribute('height', '100%');
 
-      // if (iframe.attachEvent) {
-      //   iframe.attachEvent('onload', () => this.handleReady(name, { path }))
-      // } else {
-      //   iframe.onload = () => this.handleReady(name, { path })
-      // }
+      if (iframe.attachEvent) {
+        iframe.attachEvent('onload', (event) => this.iframeReady(event));
+      } else {
+        iframe.onload = (event) => this.iframeReady(event);
+      }
 
       // 插入iframe
       const commonIframeEl = this.$refs.jPlayer;
@@ -104,6 +108,73 @@ export default {
         this._iframeEl = iframe;
       }
     },
+    iframeReady(event) {
+      console.log('iframeReady', event.target);
+      if (this.watermark && event.target) {
+        const width = event.target.offsetWidth;
+        const height = event.target.offsetHeight;
+        this.createWatermark(width, height);
+      }
+    },
+    createWatermark(width, height) {
+      console.log('createWatermark', width, height);
+      const canvas = this.createCanvas(width, height, this.watermark);
+      const commonIframeEl = this.$refs.jPlayer;
+      if (commonIframeEl) {
+        commonIframeEl.appendChild(canvas);
+      }
+    },
+    createCanvas(cwidth, cheight, watermark, image) {
+      const canvas = document.createElement('canvas');
+      canvas.width = cwidth;
+      canvas.height = cheight;
+      canvas.className = 'watermark';
+      console.log('createCanvas', canvas);
+
+      // 获取 Canvas 上下文
+      const ctx = canvas.getContext('2d');
+
+      // 在 Canvas 上绘制原始图片
+      if (image) {
+        ctx.drawImage(image, 0, 0);
+      }
+
+      // 绘制水印文本
+      ctx.font = '24px Arial';
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+
+      // 定义水印内容
+      // TODO: 此部分应动态获取
+      const watermarkText = watermark;
+
+      // 定义水印间隔和边距
+      const watermarkIntervalX = 300; // 水印之间的水平间隔
+      const watermarkIntervalY = 300; // 水印之间的垂直间隔
+      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;
+    },
     formatDatetime(timestamp) {
       return parseInt(timestamp / 1000);
     },
@@ -115,6 +186,32 @@ export default {
 
       return imgData;
     },
+    screenshotWatermark() {
+      // eslint-disable-next-line
+      return new Promise((resolve, reject) => {
+        // 创建一个新的图片对象
+        const image = new Image();
+
+        // 当图像加载完成后执行
+        image.onload = () => {
+          // 创建一个 Canvas 元素
+          const canvas = this.createCanvas(image.width, image.height, this.watermark, 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.screenshot();
+      });
+    },
     stopPlay() {
       return this._iframeEl.contentWindow.stopPlayer();
     },
@@ -122,9 +219,16 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .j-player {
   height: 100%;
   width: 100%;
+  position: relative;
+  /deep/canvas.watermark {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 10;
+  }
 }
 </style>

h5/src/views/extension/index.vue

@@ -3,6 +3,7 @@
       <j-player ref="jplay"
         :type="playerType"
         :prefix-url="params.prefixUrl"
+        :watermark="params.watermark"
 
         :player-address="params.address"
         :channel-id="params.channelId"
@@ -36,6 +37,7 @@ export default {
         channelId: '',
         address: '52.130.155.147',
         prefixUrl: '',
+        watermark: '',
 
         // 回放参数
         playerType: 'live',