canvas 生成方式

canvas 有着不错的兼容性，是一种比较可靠、成熟的可视化技术。但是它比较依赖分辨率，对文本的处理上也有着先天的不足。但是它可以很方便的将结果保存为图片，对于完成水印的需求也是非常合适的。

为了方便使用者上手，我将所有的实现坐标都设置为top/left，以方便对x、y的设置。

export default class CanvasWay {
    constructor(watermark) {
        this.watermark = watermark
        const {width, height} = watermark
        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute('width', width);
        this.canvas.setAttribute('height', height);
    }

    render() {
        const {txt, x, y, width, height, font, color, fontSize, alpha, angle} = this.watermark
        const ctx = this.canvas.getContext('2d');
        ctx.clearRect(0, 0, width, height);
        ctx.textBaseline = 'top';
        ctx.textAlign = 'left'
        ctx.fillStyle = color;
        ctx.globalAlpha = alpha;
        ctx.font = `${fontSize}px ${font}`
        ctx.translate(x, y)
        ctx.rotate(Math.PI / 180 * angle);
        ctx.translate(-x, -y - fontSize)
        ctx.fillText(txt, x, y + fontSize);
        return this.canvas.toDataURL();
    }
}

svg 生成方式

svg 与 canvas 相比浏览器兼容性几乎一致，除了几个早起的 Android 版本，这样的设备以及很难找到了，完全可以忽略。svg 使用的是 XML 的方式，不依赖分辨率，在做水印这件事上 svg 有着更好的优势。

svg 的 text 属性 x、y，是将文本左下位置定位到其坐标系的(x,y)位置，这可能和日常写 css 的定位不同，所有需要有一个 dy 值，设置其偏移量。

export default class SvgWay {
    constructor(watermark) {
        this.watermark = watermark
    }

    render() {
        const {txt, x, y, width, height, color, font, fontSize, alpha, angle} = this.watermark
        const svgStr =
            `<svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${height}px">
                <text x="${x}px" y="${y}px" dy="${fontSize}px"
                    text-anchor="start"
                    stroke="${color}"
                    stroke-opacity="${alpha}"
                    fill="none"
                    transform="rotate(${angle},${x} ${y})"
                    font-weight="100"
                    font-size="${fontSize}"
                    font-family="${font}"
                    >
                    ${txt}
                </text>
            </svg>`;
        return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;
    }
}