feat: 使用水印组件

h5/src/components/jPlayer/index.vue

 <template>
-  <div ref="jPlayer" class="j-player"></div>
+  <div ref="jPlayer" class="j-player">
+    <watermark-layer v-if="watermark.text"
+      ref="watermarkLayer"
+      :width="watermark.width"
+      :height="watermark.height"
+      :text="watermark.text"
+    />
+  </div>
 </template>
 
 <script>
+import WatermarkLayer from './watermark.vue'
+
 export default {
   name: 'JPlayer',
+  components: {
+    WatermarkLayer,
+  },
   props: {
     type: {
       type: String,
@@ -19,7 +31,7 @@ export default {
       type: Array,
       default: null,
     },
-    watermark: {
+    watermarkText: {
       type: String,
       default: '',
     },
@@ -36,6 +48,11 @@ export default {
   },
   data() {
     return {
+      watermark: {
+        width: 0,
+        height: 0,
+        text: '',
+      },
       // eslint-disable-next-line
       _iframeEl: null,
     }
@@ -110,7 +127,7 @@ export default {
     },
     iframeReady(event) {
       console.log('iframeReady', event.target);
-      if (this.watermark && event.target) {
+      if (this.watermarkText && event.target) {
         const width = event.target.offsetWidth;
         const height = event.target.offsetHeight;
         this.createWatermark(width, height);
@@ -118,62 +135,9 @@ export default {
     },
     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 - 40; // 40为底部工具条
-      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;
+      this.watermark.width = width;
+      this.watermark.height = height;
+      this.watermark.text = this.watermarkText;
     },
     formatDatetime(timestamp) {
       return parseInt(timestamp / 1000);
@@ -195,7 +159,7 @@ export default {
         // 当图像加载完成后执行
         image.onload = () => {
           // 创建一个 Canvas 元素
-          const canvas = this.createCanvas(image.width, image.height, this.watermark, image);
+          const canvas = this.$refs.watermarkLayer.createCanvas(image);
 
           // 将带有水印的 Canvas 转换回 base64
           const watermarkedBase64 = canvas.toDataURL('image/png');
@@ -237,7 +201,7 @@ export default {
   height: 100%;
   width: 100%;
   position: relative;
-  /deep/canvas.watermark {
+  ::v-deep(.watermark-layer) {
     position: absolute;
     top: 0px;
     left: 0px;