web页面设置水印

淩亂°似流年 2022-05-21 11:11 271阅读 0赞

先上图

![70][]

watermark.js

function watermark_show(settings) {
    	
        // 默认设置
        var defaultSettings={
            watermark_txt: "",
            watermark_x : 150,// 水印起始位置x轴坐标
            watermark_y : 50,// 水印起始位置Y轴坐标
            watermark_cols : 3,// 水印列数
            watermark_rows : 4,// 水印行数
            watermark_x_space : 350,// 水印x轴间隔
            watermark_y_space : 60,// 水印y轴间隔
            watermark_color : '#000000',// 水印字体颜色
            watermark_alpha : 0.1,// 水印透明度
            watermark_fontsize : '20px',// 水印字体大小
            watermark_font : '微软雅黑',// 水印字体
            watermark_width : 120,// 水印宽度
            watermark_height : 70,// 水印长度
            watermark_angle : 20// 水印倾斜度数
        };
        // 采用配置项替换默认值，作用类似jquery.extend
        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];
            }
        }
    // alert(1);
        var oTemp = document.createDocumentFragment();
    
        //获取页面最大宽度
        var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth,window.screen.width);
        
        //获取页面最大长度
        var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight,window.screen.height);
       // alert();
    
        // 如果将水印列数设置为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;
        // alert(2);
        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));
                // 设置水印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.user-select = "none";
                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.border="solid #eee 1px";
                mask_div.style.opacity = defaultSettings.watermark_alpha;
               // mask_div.style.filter.alpha.opacity=10
                //alpha(opacity=10)
                mask_div.style.filter="alpha(opacity='10')";
               // mask_div.style.filter.progid="DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";
                mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                mask_div.style.fontFamily = defaultSettings.watermark_font;
                mask_div.style.color = defaultSettings.watermark_color;
               // mask_div.style.progid="DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.866025404, M12=0.5, M21=-0.5, M22=0.866025404)" ;
                // mask_div.style.textAlign = "center";
                //mask_div.style.user-select = "none";
                // mask_div.style.width = defaultSettings.watermark_width + 'px';
                // mask_div.style.height = defaultSettings.watermark_height + 'px';
               // mask_div.style.display = "block";
                //$(mask_div).rotate({angle:45});
                oTemp.appendChild(mask_div);
            };
        };
        // alert(oTemp);
        document.body.appendChild(oTemp);
        // alert(4);
    }

调用方法

页面中

<script type="text/javascript">
      	var UESR="admin";
    </script>

最下面

<script type="text/javascript">
    var BASE="/celltrack";
    watermark_show({ watermark_txt: UESR,watermark_y:65});
    </script>

[70]: /images/20220521/ee6bea73fe174bb89aa7b4b19d2750de.png

发表评论取消回复

表情：

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

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

相关阅读

相关网站页面水印效果的实现（下）：页面水印防篡改

上一节（[网站页面水印效果的实现（上）：页面水印的添加][Link 1]）和大家介绍了页面水印如何生成以及如何使用，这一节来介绍如何防止水印被篡改，其实重点就是水印被删除。毕

旧城等待，/ 2024年03月04日 05:44/ 0 赞/ 125 阅读

相关设置web页面鼠标样式

[cursor:pointer 什么意思?][cursor_pointer] cursor规则是设定网页浏览时用户鼠标指针的样式，也就是鼠标的图形形状 c

约定不等于承诺〃/ 2023年10月03日 19:59/ 0 赞/ 35 阅读

相关 vue项目添加全局水印或某个指定页面水印源码

vue项目的页面添加水印,效果如图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

Bertha 。/ 2022年11月14日 13:23/ 0 赞/ 385 阅读

相关【Web技术】前端水印实现方案

一、问题背景为了防止信息泄露或知识产权被侵犯，在web的世界里，对于页面和图片等增加水印处理是十分有必要的，水印的添加根据环境可以分为两大类，前端浏览器环境添加和

悠悠/ 2022年10月14日 13:55/ 0 赞/ 287 阅读

相关图片水印 c# 和页面js版本

c\代码水印 public class WaterMark { private const int XInterval = 3

左手的ㄟ右手/ 2022年05月30日 01:17/ 0 赞/ 242 阅读

相关页面添加水印

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

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

相关 web页面设置水印

先上图 ![70][] watermark.js function watermark_show(settings) {

淩亂°似流年/ 2022年05月21日 11:11/ 0 赞/ 272 阅读

相关 vue 在页面上添加水印

这是效果图： ![20190223175627429.png][] 将下列代码从开始到结束的代码复制到一个新建的js文件中，然后在需要使用的页面 impor

拼搏现实的明天。/ 2022年03月17日 09:54/ 0 赞/ 556 阅读

相关 Vue项目在页面添加水印功能

Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {} let setWatermark =

迷南。/ 2022年03月15日 07:40/ 0 赞/ 486 阅读

相关给html页面添加水印

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

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