feat: 优化截图水印功能

h5/src/components/vionPlayer/index.vue

@@ -38,6 +38,11 @@ export default {
     return {
     return {
       // eslint-disable-next-line
       // eslint-disable-next-line
       _jessibuca: null,
       _jessibuca: null,
+
+      player: {
+        height: 0,
+        width: 0,
+      },
     }
     }
   },
   },
   mounted() {
   mounted() {
@@ -104,12 +109,19 @@ export default {
         console.log("on-log", msg);
         console.log("on-log", msg);
       });
       });
 
 
+      playerIns.on("videoInfo", (data) => {
+        console.log('width:', data.width, 'height:', data.height);
+        this.player.width = data.width;
+        this.player.height = data.height;
+      });
+
       playerIns.on('ptz', (arrow) => {
       playerIns.on('ptz', (arrow) => {
         // console.log('ptz', arrow);
         // console.log('ptz', arrow);
         this.$emit('ptz-control', arrow);
         this.$emit('ptz-control', arrow);
       });
       });
     },
     },
     getWatermarkBase64() {
     getWatermarkBase64() {
+
       const data = getWatermarkCanvasImg(150, 48, '文安智能');
       const data = getWatermarkCanvasImg(150, 48, '文安智能');
       console.log('getWatermarkBase64', data);
       console.log('getWatermarkBase64', data);
     },
     },
@@ -143,13 +155,18 @@ export default {
     },
     },
     screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
     screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
       return new Promise((resolve, reject) => {
       return new Promise((resolve, reject) => {
+        // 如果是播放状态
+        if (!this.player.height || !this.player.width ) {
+          reject(new Error('invaild data'));
+        }
+
         // 创建一个新的图片对象
         // 创建一个新的图片对象
         const image = new Image();
         const image = new Image();
 
 
         // 当图像加载完成后执行
         // 当图像加载完成后执行
         image.onload = () => {
         image.onload = () => {
           // 创建一个 Canvas 元素
           // 创建一个 Canvas 元素
-          const canvas = getWatermarkCanvasImg(800, 480, '文安智能', image);;
+          const canvas = getWatermarkCanvasImg(this.player.width, this.player.height, '文安智能', image);;
 
 
           // 将带有水印的 Canvas 转换回 base64
           // 将带有水印的 Canvas 转换回 base64
           const watermarkedBase64 = canvas.toDataURL('image/png');
           const watermarkedBase64 = canvas.toDataURL('image/png');
@@ -159,7 +176,7 @@ export default {
           resolve(watermarkedBase64);
           resolve(watermarkedBase64);
         };
         };
         image.error = function() {
         image.error = function() {
-          reject(new Error(null));
+          reject(new Error('image loade fail'));
         }
         }
 
 
         // 设置图像的 src 属性，加载图像
         // 设置图像的 src 属性，加载图像

h5/src/views/player/vionPlayerDemo.vue

@@ -117,6 +117,10 @@ export default {
   ::v-deep(.el-dialog__body) {
   ::v-deep(.el-dialog__body) {
     text-align: center;
     text-align: center;
     background-color: #CCC;
     background-color: #CCC;
+    > img {
+      max-width: 100%;
+      height: auto;
+    }
   }
   }
 }
 }
 </style>
 </style>