HIsheR
43 lines
2.2 KiB
TypeScript
43 lines
2.2 KiB
TypeScript
import { h } from '@ui-arch/frame';
|
|
import type { WatermarkProps } from './types.js';
|
|
|
|
/*** 取令牌实色：canvas 不认 var(--ua-*)，先解析成计算值，解析不到再退回中性灰 ***/
|
|
function tokenColor(expr: string): string {
|
|
const name = /^var\((--[\w-]+)\)$/.exec(expr.trim())?.[1]; // 形如 var(--ua-color-text-muted)
|
|
if (!name) return expr; // 已经是实际色值，直接用
|
|
const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
|
return v || 'rgb(128 128 128)'; // 兜底：中性灰，避免透明水印
|
|
}
|
|
|
|
/*** 生成平铺单元：一块 gap 见方的画布，居中画一行旋转文字，靠 background-repeat 铺满 ***/
|
|
function tile(props: WatermarkProps): string {
|
|
const gap = props.gap ?? 140; // 平铺单元尺寸
|
|
const size = props.fontSize ?? 14; // 字号
|
|
const ratio = window.devicePixelRatio || 1; // 高分屏按 DPR 放大，避免糊
|
|
const cv = document.createElement('canvas');
|
|
cv.width = gap * ratio;
|
|
cv.height = gap * ratio;
|
|
const ctx = cv.getContext('2d');
|
|
if (!ctx) return ''; // 卫语句：环境不支持 canvas 时不出图
|
|
ctx.scale(ratio, ratio);
|
|
ctx.translate(gap / 2, gap / 2);
|
|
ctx.rotate(((props.rotate ?? -20) * Math.PI) / 180);
|
|
ctx.font = `${size}px system-ui, sans-serif`;
|
|
ctx.fillStyle = tokenColor(props.color ?? 'var(--ua-color-text-muted)');
|
|
ctx.globalAlpha = props.opacity ?? 0.12;
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
props.text.split('\n').forEach((line, i, arr) => {
|
|
ctx.fillText(line, 0, (i - (arr.length - 1) / 2) * (size + 4)); // 多行按行距垂直居中
|
|
});
|
|
return cv.toDataURL('image/png');
|
|
}
|
|
|
|
/*** 水印：内容容器 + 覆盖层，覆盖层用 repeat 背景平铺，pointer-events:none 不挡交互 ***/
|
|
export function watermark(props: WatermarkProps, ...children: unknown[]): HTMLElement {
|
|
const img = tile(props);
|
|
const layer = h('div', { class: 'ua-watermark-layer', 'aria-hidden': 'true' }) as HTMLElement;
|
|
if (img) layer.style.backgroundImage = `url(${img})`; // 画布不可用时降级为无水印，不影响内容
|
|
return h('div', { class: 'ua-watermark' }, h('div', { class: 'ua-watermark-body' }, ...children), layer) as HTMLElement;
|
|
}
|