如何使用 Canvas 绘制水印

前言

在一些日常工作中，常需要一些水印来保护内部信息。在 web 端也会有一些产品需要水印功能。 这里就通过一个小 demo 来使用 Canvas 来动态生成水印图像。

Canvas 的基础知识

略过。
附上 API 文档： CanvasRenderingContext2D

实现步骤

这里主要分为三个步骤：

1. 创建 canvas 元素并设置水印内容 使用 JavaScript 创建一个 canvas，绘制水印内容。

2. 将 canvas 转换为 dataURL 使用 canvas.toDataURL() 将生成的水印图像转化为 base64 格式。

3. 应用为页面背景 将生成的 base64 数据设置为页面元素的背景，通常是 body 或其他容器。

先来看一下实现效果：

代码实现

现在来看一下代码

function addWatermark(text, options = {}) {
    const { font = '16px Arial', color = 'rgba(0, 0, 0, 0.3)', angle = -30, xGap = 50, yGap = 50 } = options;

    // 创建 canvas
    const canvas = document.createElement('canvas');
    canvas.width = 300; // 设置画布宽度
    canvas.height = 150; // 设置画布高度
    const ctx = canvas.getContext('2d');

    // 设置文字样式
    ctx.font = font;
    ctx.fillStyle = color;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    /**
        旋转文字
        这段代码的整体效果是：
            - 先将绘图坐标系平移到画布的中心。
            - 然后对坐标系进行旋转。
            - 最后将坐标系平移回原来的位置。
        这种做法常用于实现围绕画布中心点旋转的效果，因为默认的旋转是以坐标系的原点（左上角）为中心进行的。如果想绕中心旋转某个图形或元素，必须先将原点平移到中心，再进行旋转，最后恢复原位。
    */
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate((angle * Math.PI) / 180);
    ctx.translate(-canvas.width / 2, -canvas.height / 2);

    // 绘制文字
    ctx.fillText(text, canvas.width / 2, canvas.height / 2);

    // 将 canvas 转为 base64
    const base64Url = canvas.toDataURL('image/png');

    // 应用为背景
    document.body.style.backgroundImage = `url(${base64Url})`;
    document.body.style.backgroundRepeat = 'repeat';
    document.body.style.backgroundSize = `${xGap * 2}px ${yGap * 2}px`;
}

// 使用示例
addWatermark('watermark-ByK', { color: 'rgba(100, 100, 100, 0.5)', angle: -45 });

代码说明

1. canvas 尺寸
   canvas.width 和 canvas.height 定义了单个水印的区域大小。

2. 旋转文字
   使用 ctx.rotate() 来调整水印的角度。

3. toDataURL 转换
   将 canvas 转换为图片数据格式。

4. 设置背景
   background-repeat: repeat; 使水印图案平铺整个页面。