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 = () => {