原理简介

首先创建一个canvas画布，利用canvas的特点绘制出一个带有文字字样的水印区域，然后将这个水印区域通过 toDataURL方法输出为一个图片，并将这个图片设置为背景图，通过backgroud-repeat：repeat 样式填满这个屏幕。

实现方法

# 封装一个生成图片的函数

先创建一个canvas元素，标签用于使用 JavaScript 动态绘制图形但是元素没有自己的绘图能力（它只是一个图形容器），因此我们需要通过getContext()方法获得一个画布对象。

该对象提供在画布上绘图的方法和属性，可用于在画布上绘制文本、线条、框、圆等，具体实现如下 ⬇

createImg(imgOptions = {}) {
    const canvas = document.createElement('canvas');
    const text = imgOptions.content || "Test";
    canvas.width = imgOptions.width || 200;
    canvas.height = imgOptions.height || 200;
    const ctx = canvas.getContext('2d');
    if (ctx) {
        ctx.font = imgOptions.font || "15px PingFang SC, sans-serif";
        ctx.fillStyle = imgOptions.color ||  "rgba(150, 160, 150, 0.5)";
        ctx.rotate(imgOptions.rotateDegree);
        ctx.textAlign = 'center';
        ctx.fillText(text, imgOptions.x || 100, imgOptions.y || 100);
    }
    return canvas.toDataURL('image/png');
},

canvas.toDataURL()方法返回一个用于图片展示的data url，即我们常说的base64地址。其接受两个参数 type 和 encoderOptions ：

· type：可选，转换的图片类型，默认值是image/png，还可以是image/jpeg，甚至image/webp前提浏览器支持，如Chrome）等。

· encoderOptions：可选，转换的图片质量。范围是0到1，不在该取值范围，则取默认值0.92。此参数要想有效，type 需要是 image/jpeg 或者 image/webp，其他 type 值无效。

# 将图片作为背景图添加至页面上并铺满页面

将生成图片的函数封装好之后，我们就可以把该图片作为背景图片平铺到页面上，实现添加水印的效果了，具体实现如下 ⬇

generateWaterMark({
    className = 'my_watermarked',
    width = 360,
    height = 240,
    content = 'Test',
    font = '15px PingFang SC, sans-serif',
    color = 'rgba(150, 160, 150, 0.5)',
    rotate = -20,
    position = 'absolute',
    top = 0,
    left = 0,
    zIndex = 1000,
    }) {
    const option = {
        width,
        height,
        content,
        font,
        color,
        rotateDegree: (rotate * Math.PI) / 180,
    };
 
    const dataUri1 = this.createImg({
        ...option,
        x: 80,
        y: 120,
    });
    const dataUri2 = this.createImg({
        ...option,
        x: 200,
        y: 280,
    });
 
    let defaultStyle = document.createElement('style');
    defaultStyle.innerHTML = `.${className}:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        ${top || top === 0 ? `top: ${top}px;` : ''}
        ${left || left === 0 ? `left: ${left}px;` : ''}
        background-repeat: repeat;
        pointer-events: none;
        }`;
 
    let styleEl = document.createElement('style');
    styleEl.innerHTML = `.${className}:after
        {
        ${position ? `position: ${position}` : ''};
        ${zIndex ? `z-index:${zIndex}` : ''};
        background-image: url(${dataUri1}), url(${dataUri2});
        background-size: ${option.width}px ${option.height}px;
        }`;
    document.head.appendChild(defaultStyle);
    document.head.appendChild(styleEl);
},

可以看到，我们首先创建了两个style元素，然后利用css样式

· background-image: url(${dataUri1}), url(${dataUri2})

· background-repeat: repeat

把生成的两张图片作为背景图片进行填充并铺满整个页面（两张图片通过传入的文字偏移量不同，来实现页面上的交错效果，也可以选用一张或多张）；

zIndex表示图片所处图层，要尽可能设置的大一些，让水印处于最底层。

当然也可以在此方法中修改图片的大小，文字颜色，字体大小等。

最后，我们可以在addons/web/static/src/js/chrome/web_client.js (不同版本路径可能不同)的start()函数中调用该方法。

并在需要添加水印的页面中加上classs="my_watermarked即可，可以添加到body上，这样所有页面均生效 ⬇

start: function () {
    core.bus.on('change_menu_section', this, function (menuID) {
        this.do_push_state(_.extend($.bbq.getState(), {
            menu_id: menuID,
        }));
    });
    <-- code start -->
    const watermark_option = {
        content: "这是一个水印",
        className: 'my_watermarked',
    };
    this.genWaterMark(watermark_option);
   <-- code end -->
 
    return this._super.apply(this, arguments);
},

注意：该方法是通过class来确定渲染水印，因此class的名称一定要与传入的值一致。