diff --git a/src/components/waterMark.vue b/src/components/waterMark.vue index 17f9bf57..e5fc1701 100644 --- a/src/components/waterMark.vue +++ b/src/components/waterMark.vue @@ -39,8 +39,19 @@ {{ $t('waterMark.setting.position.rt') }} {{ $t('waterMark.setting.position.lb') }} {{ $t('waterMark.setting.position.rb') }} + {{ $t('waterMark.setting.position.full') }} +
+ {{ $t('waterMark.setting.angle') }} + +
+ + 横向 + 倾斜 + +
+
@@ -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 = { 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 = () => {