网页水印的实现

CSS 方式

大体上是前端插入 DOM 结构+ CSS pointer-events: none 的组合方式。

因为pointer-events 的方式，所以仅建议用于移动端。

.devework_watermarkWrap {
    /*display: none;*/
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    color: #dbdbdb;
    font-size: 17px;
    overflow: hidden;
    pointer-events: none;
    height: 100%;
    z-index: 10;
}

.devework_watermark {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: .5;
    float: left;
    text-shadow: 0 0 0 #fff;
    text-align: center;
    width: 50%;
    height: 150px;
    line-height: 150px;
}

/* 这个在移动端水印防止被识别手机号 */
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

    var waterMarkStr = 'hhhhhhhhhhh';
    // 水印
    setTimeout(function(){
        var body = document.body,html = document.documentElement;
        var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
        var width = Math.max( body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth );

        var wrapDom = document.createElement("div");
        wrapDom.className = "devework_watermarkWrap";

        document.getElementById('container').appendChild(wrapDom);

        var div = document.createElement("div");
        div.className = "devework_watermark";
        div.innerHTML = "";
        div.style.visibility = "hidden";
        wrapDom.appendChild(div);
        var domWidth = div.clientWidth, domHeight = div.clientHeight;

        var cellWidth = (domWidth + domHeight) / 1.414,
            cellHeight = (domWidth + domHeight) / 1.414;
        var x_count = Math.round(width / cellWidth),
            y_count = Math.round(height / cellHeight) + 4,
            count = x_count * y_count;

        wrapDom.removeChild(div);


        var strArr = [];
        for (var i = 0; i < count; i++) {
            strArr.push('<div class="devework_watermark">'+ waterMarkStr +'</div>');
        }
        wrapDom.innerHTML = strArr.join("");
    }, 100);

SVG 背景图方式

兼容性比较好，就是因为背景图方式，所以有些地方遮不了多少。

 // 设置 SVG 格式的水印
var setSvgWaterMark = function (str, domId, fontSize, width, height) {
    domId = domId || 'main';
    fontSize = fontSize || 17;
    width = width || 400;
    height = height || 200;
    var waterMarkDiv = document.getElementById(domId);
    var waterMarkStr = str;
    var svgstring = '<svg id="diagtext" xmlns="http://www.w3.org/2000/svg"' +
            ' xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><style' +
            ' type="text/css">text { fill: "#dbdbdb";font-family: "Helvetica Neue", "Arial", "PingFang SC",' +
            ' "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", sans-serif }</style><defs><pattern' +
            ' id="finawmhandle" patternUnits="userSpaceOnUse" width="' + width + '" height="' + height + '"><text' +
        ' y="30"' +
            ' font-size="' + fontSize + '" id="name" opacity=".1">' + waterMarkStr + '</text></pattern><pattern' +
            ' id="combo"' +
            ' xlink:href="#finawmhandle" patternTransform="rotate(-45)"></pattern></defs><rect width="100%" height="100%" fill="url(#combo)" /></svg>';

    if (window.btoa) {
        waterMarkDiv.style.backgroundImage = "url('data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgstring))) + "')";
    } else {
        waterMarkDiv.style.backgroundImage = "url('data:image/svg+xml;base64," + base64encode(svgstring) + "')";
    }
};

一个第三方库

https://github.com/loadchange/gwm

用于内部系统生成水印，可提示信息安全与责任追踪。安全问题不容忽视，对于内部人员敏感操作有一定的提示作用。

特性

• 支持生成 canvas、svg、element 三种类型水印
• 支持元素监控，防止篡改
• 可扩展性强