给html页面添加水印

秒速五厘米 2021-07-26 12:18 1003阅读 0赞

看到别人的页面有水印，感觉很有趣

尝试了下给html加水印的效果，如图

![format_png][]

实现原理：

根据页面大小，动态添加若干个div，将传递过来的文字写到div里，设置div旋转的角度、字体、字体颜色等

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    </head>
    <body>
    <div>
        <h6>测试页面 测试页面</h6>
        <h5>测试页面 测试页面</h5>
        <h4>测试页面 测试页面</h4>
        <h3>测试页面 测试页面</h3>
        <h2>测试页面 测试页面</h2>
        <h1>测试页面 测试页面</h1>
    </div>
    </body>
    <script src="shuiyin.js"></script>
    <script type="text/javascript">
    var now = getNow();
    watermark({"watermark_txt":"A B C X Y Z "+now});
    </script>
    </html>

shuiyin.js

function watermark(settings) {
        //默认设置
        var defaultSettings = {
            watermark_txt: "text",
            watermark_x: 20, //水印起始位置x轴坐标
            watermark_y: 20, //水印起始位置Y轴坐标
            watermark_rows: 20, //水印行数
            watermark_cols: 20, //水印列数
            watermark_x_space: 100, //水印x轴间隔
            watermark_y_space: 50, //水印y轴间隔
            watermark_color: '#aaa', //水印字体颜色
            watermark_alpha: 0.4, //水印透明度
            watermark_fontsize: '15px', //水印字体大小
            watermark_font: '微软雅黑', //水印字体
            watermark_width: 210, //水印宽度
            watermark_height: 80, //水印长度
            watermark_angle: 20 //水印倾斜度数
        };
        if (arguments.length === 1 && typeof arguments[0] === "object") {
            var src = arguments[0] || {};
            for (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 page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
        var cutWidth = page_width * 0.0150;
        var page_width = page_width - cutWidth;
        //获取页面最大高度
        var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 450;
        page_height = Math.max(page_height, window.innerHeight - 30);
        //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
        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));
        }
        //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
        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.className = 'mask_div';
                mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                //设置水印div倾斜显示
                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";
                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.opacity = defaultSettings.watermark_alpha;
                mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                mask_div.style.fontFamily = defaultSettings.watermark_font;
                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);
    }
    
    function getNow() {
        var d = new Date();
        var year = d.getFullYear();
        var month = change(d.getMonth() + 1);
        var day = change(d.getDate());
        var hour = change(d.getHours());
        var minute = change(d.getMinutes());
        var second = change(d.getSeconds());
    
        function change(t) {
            if (t < 10) {
                return "0" + t;
            } else {
                return t;
            }
        }
        var time = year + '年' + month + '月' + day + '日 ' + hour + '时' + minute + '分' + second + '秒';
        return time;
    }

[format_png]: /images/20210726/1c7128736c1e4dd58422544d7dab3d04.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1003人围观）

还没有评论，来说两句吧...

相关阅读

相关 C# 给Excel添加水印

我们知道Microsoft Excel并没有内置的功能直接给Excel表添加水印，但是其实我们可以用其他变通的方式来解决此问题，如通过添加页眉图片或艺术字的方法来模仿水印的外观

悠悠/ 2024年02月17日 18:46/ 0 赞/ 138 阅读

相关使用JS给页面添加水印效果

原文：[https://www.cnblogs.com/Miracle-ZLZ/p/9340249.html][https_www.cnblogs.com_Miracle-ZL

灰太狼/ 2023年06月25日 06:18/ 0 赞/ 26 阅读

相关倾斜水印_怎么用ps给图片添加水印

![7e6d5a91b32f8cb6f4bd17d4f09f824c.png][] 一、制作水印 1、点击“文件”——“新建”，建立一个图层，大小可以根据自己的需求设置

系统管理员/ 2022年11月19日 11:18/ 0 赞/ 752 阅读

相关 java给图片添加水印

1---jsp <body> <img src="ImagehandlerServlet"> </body> 2---servl

本是古典何须时尚/ 2022年06月13日 09:23/ 0 赞/ 454 阅读

相关 Java实现给图片添加水印

原文转载自：http://blog.csdn.net/dy\_smile/article/details/6722907 ，有做部分修改给图片添加图片/

清疚/ 2022年06月06日 11:00/ 0 赞/ 542 阅读

相关页面添加水印

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="statics/libs/j

小鱼儿/ 2022年05月26日 21:20/ 0 赞/ 361 阅读

相关 Java给图片添加水印

/ 给图片添加水印、可设置水印图片旋转角度 @param iconPath 水印图片路径 @param sr

比眉伴天荒/ 2022年05月13日 11:18/ 0 赞/ 491 阅读

相关 PHP给图片添加水印

首先需要PHP安装gd库，一般默认会给自动安装，大家放心！ [demo下载、包含其他的一些处理图片的类：上传、缩略图、检查是否合法等][demo] 接下来直接上de

清疚/ 2021年09月28日 05:10/ 0 赞/ 611 阅读

相关给原生html中添加水印遮罩层

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

落日映苍穹つ/ 2021年09月21日 18:24/ 0 赞/ 453 阅读

相关给html页面添加水印

看到别人的页面有水印，感觉很有趣尝试了下给html加水印的效果，如图 ![format_png][] 实现原理：　　根据页面大小，动态添加若干个div，将传递过来的

秒速五厘米/ 2021年07月26日 12:18/ 0 赞/ 1004 阅读