js 水印

js 水印

function watermark(valueList, tagId='') {
    let tab = null;
    let maxWidth = 0;
    let maxHeight = 0;
    if (tagId){
        tab = document.getElementById(tagId);
        tab.style.position = "relative";
        maxWidth = window.screen.width;
        maxHeight = window.screen.height;
    }else {
        tab = document.body;
        maxWidth = document.documentElement.clientWidth;
        maxHeight = document.documentElement.clientHeight;
    }

    let intervalWidth = 340;    //间隔宽度
    let intervalheight = 200;   //间隔高度
    let rowNumber = (maxWidth - 40 - 200) / intervalWidth;    //横向个数
    let coumnNumber = (maxHeight - 40 - 80) / intervalheight;   //纵向个数

    //默认设置
    let defaultSettings = {
        watermark_color: '#aaa', //水印字体颜色
        watermark_alpha: 0.3, //水印透明度
        watermark_fontsize: '15px', //水印字体大小
        watermark_font: '微软雅黑', //水印字体
        watermark_ 200, //水印宽度
        watermark_height: 80, //水印长度
        watermark_angle: 15 //水印倾斜度数
    };
    let _temp = document.createDocumentFragment();
    for (let i = 0; i < rowNumber; i++) {
        for (let j = 0; j < coumnNumber; j++) {
            let x = intervalWidth * i + 20;
            let y = intervalheight * j + 30;
            let mark_div = document.createElement('div');
            mark_div.id = 'mark_div' + i + j;
            mark_div.className = 'mark_div';
            for (let k = 0; k < valueList.length; k++) {
                let span0 = document.createElement('div');
                span0.appendChild(document.createTextNode(valueList[k]));
                mark_div.appendChild(span0);
            }

            //设置水印div倾斜显示
            mark_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mark_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mark_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mark_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mark_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mark_div.style.visibility = "";
            mark_div.style.position = "absolute";
            mark_div.style.left = x + 'px';
            mark_div.style.top = y + 'px';
            mark_div.style.overflow = "hidden";
            mark_div.style.zIndex = "9999";
            mark_div.style.pointerEvents = 'none'; //pointer-events:none  让水印不阻止交互事件
            mark_div.style.opacity = defaultSettings.watermark_alpha;
            mark_div.style.fontSize = defaultSettings.watermark_fontsize;
            mark_div.style.fontFamily = defaultSettings.watermark_font;
            mark_div.style.color = defaultSettings.watermark_color;
            mark_div.style.textAlign = "center";
            mark_div.style.width = defaultSettings.watermark_width + 'px';
            mark_div.style.height = defaultSettings.watermark_height + 'px';
            mark_div.style.display = "block";

            _temp.appendChild(mark_div);
        }
    }
    tab.appendChild(_temp);
}


watermark(['hello world', 'Irving', '1388888888'],"page-content");