Implementation example of adding watermark mask layer to native HTML

Time:2021-10-11

design sketch

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    < title > watermark mask < / Title >
</head>
<style>
    .watermark_mask {
        position: fixed;
        top: 10px;
    }

    .hello {
        width: 500px;
        height: 2048px;
        margin: 0 auto;
        background-color: pink;
    }
</style>
<body>
    <div class="hello">
        Hello World

        <div style="margin-top: 600px;">Hello World 2</div>
        <div style="margin-top: 1200px;">Hello World 3</div>
    </div>
    <div id="watermarkId" class="watermark_mask"></div>
    <script>
        const watermarkId = "watermarkId";

        //Watermark mask function
        function watermarkUtils(settings, id) {
            //Default settings
            var defaultSettings={
                watermark_txt: "text",
                watermark_ x: 10, // X-axis coordinates of watermark starting position
                watermark_ y: 20, // Y-axis coordinates of watermark starting position
                watermark_ Rows: 55, // number of watermark lines
                watermark_ Cols: 55, // number of watermark columns
                watermark_ x_ Space: 10, // watermark X-axis interval
                watermark_ y_ Space: 10, // watermark Y-axis interval
                watermark_ Color: '#000000', // watermark font color
                watermark_ Alpha: 0.2, // watermark transparency
                watermark_ Fontsize: '15px', // watermark font size
                watermark_ Font: 'Microsoft YaHei', // watermark font
                watermark_ Width: 50, // watermark width
                watermark_ Height: 20, // watermark length
                watermark_ Angle: 25 // watermark inclination
            };

            //Replace the default value with a configuration item, which is similar to jquery.extend
            if(typeof settings === "object") {
                var src = settings;
                for(let key in src) {
                    if(src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
                    continue;
                    else if(src[key])
                    defaultSettings[key]=src[key];
                }
            }

            var oTemp = document.createDocumentFragment();
            // var oTemp = document.createElement("div");

            //Gets the maximum width of the page
            var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
            //Get maximum page length
            var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);

            //If the number of watermark columns is set to 0, or the number of watermark columns is set too large to exceed the maximum width of the page, the number of watermark columns and the watermark X-axis interval are recalculated
            if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width *defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
                defaultSettings.watermark_cols = parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
                defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
            }
            //If the number of watermark lines is set to 0, or the number of watermark lines is set too large to exceed the maximum length of the page, the number of watermark lines and the watermark Y-axis interval are recalculated
            if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
                defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
                defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
            }
            var x;
            var y;
            for (var i = 0; i < defaultSettings.watermark_rows; i++) {
                y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
                for (var j = 0; j < defaultSettings.watermark_cols; j++) {
                    x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

                    var mask_div = document.createElement('div');
                    mask_div.id = 'mask_div' + i + j;
                    mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                    //Set watermark div tilt display
                    mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.visibility = "";
                    mask_div.style.position = "absolute";
                    //Fail to select
                    mask_div.style.left = x + 'px';
                    mask_div.style.top = y + 'px';
                    mask_div.style.overflow = "hidden";
                    mask_div.style.zIndex = "9999";
                    mask_div.style.pointerEvents = "none";
                    //mask_div.style.border="solid #eee 1px";
                    mask_div.style.opacity = defaultSettings.watermark_alpha;
                    mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                    mask_div.style.color = defaultSettings.watermark_color;
                    mask_div.style.textAlign = "center";
                    mask_div.style.width = defaultSettings.watermark_width + 'px';
                    mask_div.style.height = defaultSettings.watermark_height + 'px';
                    mask_div.style.display = "block";
                    oTemp.appendChild(mask_div);
                };
            };

            // document.body.appendChild(oTemp);
            try {
                // console.log(document.getElementById(id), "document.getElementById(id)");
                document.getElementById(id).appendChild(oTemp);
            } catch(error) {
                Console.error (error, "mask exception");
            }
        };

        watermarkUtils({ watermark_txt: "9527", watermark_width: 60, watermark_fontsize: "14px" }, watermarkId);
    </script>
</body>
</html>

Core code

const watermarkId = "watermarkId";

//Watermark mask function
function watermarkUtils(settings, id) {
    //Default settings
    var defaultSettings={
        watermark_txt: "text",
        watermark_ x: 10, // X-axis coordinates of watermark starting position
        watermark_ y: 20, // Y-axis coordinates of watermark starting position
        watermark_ Rows: 55, // number of watermark lines
        watermark_ Cols: 55, // number of watermark columns
        watermark_ x_ Space: 10, // watermark X-axis interval
        watermark_ y_ Space: 10, // watermark Y-axis interval
        watermark_ Color: '#000000', // watermark font color
        watermark_ Alpha: 0.2, // watermark transparency
        watermark_ Fontsize: '15px', // watermark font size
        watermark_ Font: 'Microsoft YaHei', // watermark font
        watermark_ Width: 50, // watermark width
        watermark_ Height: 20, // watermark length
        watermark_ Angle: 25 // watermark inclination
    };

    //Replace the default value with a configuration item, which is similar to jquery.extend
    if(typeof settings === "object") {
        var src = settings;
        for(let key in src) {
            if(src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
            continue;
            else if(src[key])
            defaultSettings[key]=src[key];
        }
    }

    var oTemp = document.createDocumentFragment();
    // var oTemp = document.createElement("div");

    //Gets the maximum width of the page
    var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
    //Get maximum page length
    var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);

    //If the number of watermark columns is set to 0, or the number of watermark columns is set too large to exceed the maximum width of the page, the number of watermark columns and the watermark X-axis interval are recalculated
    if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width *defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
        defaultSettings.watermark_cols = parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
        defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
    }
    //If the number of watermark lines is set to 0, or the number of watermark lines is set too large to exceed the maximum length of the page, the number of watermark lines and the watermark Y-axis interval are recalculated
    if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
        defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
        defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
    }
    var x;
    var y;
    for (var i = 0; i < defaultSettings.watermark_rows; i++) {
        y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
        for (var j = 0; j < defaultSettings.watermark_cols; j++) {
            x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

            var mask_div = document.createElement('div');
            mask_div.id = 'mask_div' + i + j;
            mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
            //Set watermark div tilt display
            mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.visibility = "";
            mask_div.style.position = "absolute";
            //Fail to select
            mask_div.style.left = x + 'px';
            mask_div.style.top = y + 'px';
            mask_div.style.overflow = "hidden";
            mask_div.style.zIndex = "9999";
            mask_div.style.pointerEvents = "none";
            //mask_div.style.border="solid #eee 1px";
            mask_div.style.opacity = defaultSettings.watermark_alpha;
            mask_div.style.fontSize = defaultSettings.watermark_fontsize;
            mask_div.style.color = defaultSettings.watermark_color;
            mask_div.style.textAlign = "center";
            mask_div.style.width = defaultSettings.watermark_width + 'px';
            mask_div.style.height = defaultSettings.watermark_height + 'px';
            mask_div.style.display = "block";
            oTemp.appendChild(mask_div);
        };
    };

    // document.body.appendChild(oTemp);
    try {
        // console.log(document.getElementById(id), "document.getElementById(id)");
        document.getElementById(id).appendChild(oTemp);
    } catch(error) {
        Console.error (error, "mask exception");
    }
};

//Use
watermarkUtils({ watermark_txt: "9527", watermark_width: 60, watermark_fontsize: "14px" }, watermarkId);

This is the end of this article about the implementation example of adding watermark mask layer to native HTML. For more information about adding watermark mask layer to HTML, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!