feat: 增加水印功能

h5/src/components/jPlayer/watermark.vue

@@ -32,8 +32,9 @@ export default {
      */
      */
     createCanvas(image) {
     createCanvas(image) {
       const canvas = document.createElement('canvas');
       const canvas = document.createElement('canvas');
-      canvas.width = 400;
-      canvas.height = 300;
+      //  若不设置宽、高，无法渲染内容
+      canvas.width = this.width;
+      canvas.height = this.height;
       // canvas.height = this.height - 40; // 40为底部工具条
       // canvas.height = this.height - 40; // 40为底部工具条
       canvas.className = 'watermark';
       canvas.className = 'watermark';
       console.log('createCanvas', canvas);
       console.log('createCanvas', canvas);
@@ -48,17 +49,17 @@ export default {
 
 
       // 绘制水印文本
       // 绘制水印文本
       ctx.font = '24px Arial';
       ctx.font = '24px Arial';
-      ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
 
 
       // 定义水印内容
       // 定义水印内容
       const watermarkText = this.text;
       const watermarkText = this.text;
 
 
       // 定义水印间隔和边距
       // 定义水印间隔和边距
       // TODO: 未兼容移动端
       // TODO: 未兼容移动端
-      const watermarkIntervalX = 80; // 水印之间的水平间隔
-      const watermarkIntervalY = 80; // 水印之间的垂直间隔
-      const watermarkMarginX = 30; // 水印距离左边的边距
-      const watermarkMarginY = 0; // 水印距离顶部的边距
+      const watermarkIntervalX = 220; // 水印之间的水平间隔
+      const watermarkIntervalY = 260; // 水印之间的垂直间隔
+      const watermarkMarginX = 50; // 水印距离左边的边距
+      const watermarkMarginY = 180; // 水印距离顶部的边距
 
 
       // 循环绘制水印
       // 循环绘制水印
       for (let x = watermarkMarginX; x < canvas.width; x += watermarkIntervalX) {
       for (let x = watermarkMarginX; x < canvas.width; x += watermarkIntervalX) {
@@ -87,10 +88,4 @@ export default {
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-.watermark-layer {
-  ::v-deep(canvas) {
-    width: 100%;
-    height: 100%;
-  }
-}
 </style>
 </style>