使用js添加文字水印

经常在一些发布页面后面会有用户名的水印，主要用来在截图时候标识是谁发的。下面我们来看一下如何使用js来添加水印。

这里我们使用canvas来进行水印绘制

/**
 * 绘制水印
 * @param canvas 页面中canvas
 * @param text 水印文字
 * @param width 绘制区域宽度
 * @param height 绘制区域高度
 */
let drawWaterMark = ({canvas, text,width,height,color,fontSize=14}) => {
        const ctx = canvas.getContext("2d");
        let wmConfig = {
            font: 'microsoft yahei',//字体
            fontSize: fontSize || 14,//字号,
            color:color || "rgba(0,0,0,.3)"//字体颜色 
        }
        if(canvas.width < width){
            canvas.width = width
        }if(canvas.height < height){
            canvas.height = height
        }
        ctx.fillStyle = wmConfig.color
        ctx.font = `{wmConfig.fontSize}px{wmConfig.font}`;
        ctx.lineWidth = 1;
        ctx.textAlign = "left";
        ctx.textBaseline = "middle";
        // //文字坐标
        const maxPx = Math.max(width, height);
        const stepPx =50;
        let arrayX = [0];//初始水印位置 canvas坐标 0 0 点
        while (arrayX[arrayX.length - 1] < maxPx / 2) {

            arrayX.push(arrayX[arrayX.length - 1] + stepPx);
        }
        arrayX.push(...arrayX.slice(1, arrayX.length).map((el) => {

            return -el;
        }));

        for (let i = 0; i < arrayX.length; i++) {

            for (let j = 0; j < arrayX.length; j++) {

                ctx.save();
                ctx.translate(width / 2, height / 2); ///画布旋转原点 移到 图片中心
                ctx.rotate(-Math.PI / 5);

                let offsetY = wmConfig.fontSize + 2;
                ctx.fillText(text, arrayX[i], arrayX[j] + offsetY);

                ctx.restore();
            }
        }
    };

主功能方法就写完了，我们看一下调用

页面结构

<style>
 #canvas{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    pointer-events: none;
 }
</style>
<canvas id="canvas"> </canvas>

调用结构

let canvas = document.getElementById("canvas")

drawWaterMark({canvas,width:canvas.offsetWidth,height:canvas.offsetHeight,text:"OECOM"})

至此，在页面上添加水印的方法已经完成了

另外还有一种场景是给图片增加水印，原理其实是相同的，需要我们将图片画在canvas上，然后再进行操作，最终转换会图片即可。

/**
 * 图片路径转成canvas
 * @param {图片url} url
 */
async function imgToCanvas(url) {
    // 创建img元素
    const img = document.createElement("img");
    img.src = url;
    img.setAttribute("crossOrigin", "anonymous"); // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    await new Promise((resolve) => (img.onload = resolve));
    // 创建canvas DOM元素，并设置其宽高和图片一样
    const canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
    canvas.getContext("2d").drawImage(img, 0, 0);
    return canvas;
}

然后就是将canvas转为图片即可

/**
 * canvas转成img
 * @param {canvas对象} canvas
 */
function convasToImg(canvas) {
    // 新建Image对象，可以理解为DOM
    var image = new Image();
    // canvas.toDataURL 返回的是一串Base64编码的URL
    // 指定格式 PNG
    image.src = canvas.toDataURL("image/png");
    return image;
}