feat: 平铺水印

src/components/waterMark.vue

@@ -39,8 +39,19 @@
         <Radio label="rt">{{ $t('waterMark.setting.position.rt') }}</Radio>
         <Radio label="lb">{{ $t('waterMark.setting.position.lb') }}</Radio>
         <Radio label="rb">{{ $t('waterMark.setting.position.rb') }}</Radio>
+        <Radio label="full">{{ $t('waterMark.setting.position.full') }}</Radio>
       </RadioGroup>
     </div>
+    <div class="setting-item" v-show="waterMarkState.position === 'full'">
+      <span class="mr-10px">{{ $t('waterMark.setting.angle') }}</span>
+
+      <div>
+        <RadioGroup v-model="waterMarkState.isRotate">
+          <Radio :label="0">横向</Radio>
+          <Radio :label="1">倾斜</Radio>
+        </RadioGroup>
+      </div>
+    </div>
   </Modal>
 </template>
 
@@ -56,7 +67,7 @@ const waterMarkState = reactive({
   isRotate: 0, // 组件不支持boolean
   font: 'serif', // 可考虑自定义字体
   color: '#ccc', // 可考虑自定义颜色
-  position: 'lt', // lt 左上 lr 右上 lb 左下  rb 右下
+  position: 'lt', // lt 左上 lr 右上 lb 左下  rb 右下 full 平铺
 });
 
 const showWaterMadal = ref(false);
@@ -135,6 +146,35 @@ const drawWaterMark: Record<string, any> = {
     waterCanvas = null;
     ctx = null;
   },
+  full: (width: number, height: number, cb: (imgString: string) => void) => {
+    let waterCanvas: HTMLCanvasElement | null = createCanvas(width, height);
+    let ctx: CanvasRenderingContext2D | null = waterCanvas.getContext('2d')!;
+    const textW = ctx.measureText(waterMarkState.text).width + 40;
+    let patternCanvas: HTMLCanvasElement | null = createCanvas(
+      waterMarkState.isRotate === 0 ? textW : textW * 2, // 若有倾斜，那么斜边都会大于直角边 按30度算2倍(简单)
+      waterMarkState.isRotate === 0 ? waterMarkState.size + 20 : textW + 20
+    );
+    document.body.appendChild(patternCanvas);
+    let ctxWater: CanvasRenderingContext2D | null = patternCanvas.getContext('2d')!;
+    ctxWater.textAlign = 'left';
+    ctxWater.textBaseline = 'top';
+    ctxWater.font = `${waterMarkState.size}px ${waterMarkState.font}`;
+    ctxWater.fillStyle = `${waterMarkState.color}`;
+    if (waterMarkState.isRotate === 0) {
+      ctxWater.fillText(waterMarkState.text, 10, 10);
+    } else {
+      ctxWater.translate(0, textW - 10);
+      ctxWater.rotate((-30 * Math.PI) / 180); // 简单例子 按30度算
+      ctxWater.fillText(waterMarkState.text, 0, 0);
+    }
+    ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat')!;
+    ctx.fillRect(0, 0, width, height);
+    cb && cb(waterCanvas.toDataURL());
+    waterCanvas = null;
+    patternCanvas = null;
+    ctx = null;
+    ctxWater = null;
+  },
 };
 
 const onModalOk = () => {