JS添加水印的工具方法

最新推荐文章于 2024-05-21 09:30:00 发布

彪悍的战斗猿

最新推荐文章于 2024-05-21 09:30:00 发布

阅读量453

点赞数 1

分类专栏： # 工具方法文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43979866/article/details/125602465

版权

工具方法专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里是添加到body上的，如果想添加到指定容器，可以在代码最后一行更改要添加水印的容器

// text是水印的文字内容
function waterMark = function (text) {
    if (document.getElementById('waterMark')) return
    // 旋转角度大小
    var rotateAngle = Math.PI / 6;

    // labels是要显示的水印文字，垂直排列
    var labels = new Array();
    labels.push(text);

    let pageWidth = document.body.clientWidth
    let pageHeight = document.body.clientHeight

    let canvas = document.createElement('canvas');
    let canvasWidth = canvas.width = pageWidth;
    let canvasHeight = canvas.height = pageHeight;

    var context = canvas.getContext('2d');
    context.font = "15px Arial";

    // 先平移到画布中心
    context.translate(pageWidth / 2, pageHeight / 2 - 250);
    // 在绕画布逆方向旋转30度
    context.rotate(-rotateAngle);
    // 在还原画布的坐标中心
    context.translate(-pageWidth / 2, -pageHeight / 2);

    // 获取文本的最大长度
    let textWidth = Math.max(...labels.map(item => context.measureText(item).width));

    let lineHeight = 15, fontHeight = 12, positionY, i
    i = 0, positionY = 0
    while (positionY <= pageHeight) {
        positionY = positionY + lineHeight * 5
        i++
    }
    canvasWidth += Math.sin(rotateAngle) * (positionY + i * fontHeight) // 给canvas加上画布向左偏移的最大距离
    canvasHeight = 2 * canvasHeight
    for (positionY = 0, i = 0; positionY <= canvasHeight; positionY = positionY + lineHeight * 5) {
        // 进行画布偏移是为了让画布旋转之后水印能够左对齐;
        context.translate(-(Math.sin(rotateAngle) * (positionY + i * fontHeight)), 0);
        for (let positionX = 0; positionX < canvasWidth; positionX += 2 * textWidth) {
            let spacing = 0;
            labels.forEach(item => {
                context.fillText(item, positionX, positionY + spacing);
                spacing = spacing + lineHeight;
            })
        }
        context.translate(Math.sin(rotateAngle) * (positionY + i * fontHeight), 0);
        context.restore();
        i++
    }
    let dataUrl = canvas.toDataURL('image/png');
    let waterMarkPage = document.createElement('div');
    waterMarkPage.id = "waterMark"
    let style = waterMarkPage.style;
    style.position = 'fixed';
    style.overflow = "hidden";
    style.left = 0;
    style.top = 0;
    style.opacity = '0.4';
    style.background = "url(" + dataUrl + ")";
    style.zIndex = 999;
    style.pointerEvents = "none";

    style.width = '100%';
    style.height = '100vh';
    document.body.appendChild(waterMarkPage);
}