<%@ page language="java" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>悬浮水印</title>

        <meta http-equiv="pragma" content="no-cache">

        <meta http-equiv="cache-control" content="no-cache">

        <meta http-equiv="expires" content="0">

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="This is my page">

        <script type="text/javascript" src="watermark.js"></script>

    </head>

    <body onload="GetWaterMarked(window,'watermark.jpg','this')">

        <div><font size="7">

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        </font></div>

    </body>

</html>
function GetWaterMarked(targetObj,jpgUrl,targetStr ) {

        var windowobj=targetObj;

        var waterMarkPicUrl=jpgUrl;

        var controlWindowStr=targetStr;

        if(windowobj.document.getElementById("waterMark") != null)

            return;

        var m = "waterMark";

        var newMark = windowobj.document.createElement("div");

        newMark.id = m;

        //定义div绝对位置

        newMark.style.position = "absolute";

        newMark.style.top = "0px";

        newMark.style.left = "0px";

        //设置div堆叠顺序，若为正数，则离用户更近，为负，数则表示离用户更远

        newMark.style.zIndex = "99999";

        //使用浏览器宽

        newMark.style.width = windowobj.document.body.clientWidth;

        //页面实际长度(不显示竖向滚动条)>浏览器长

        if( parseInt(windowobj.document.body.scrollHeight) > parseInt(windowobj.document.body.clientHeight) ){

            newMark.style.height = windowobj.document.body.scrollHeight;

        }else{

            newMark.style.height = windowobj.document.body.clientHeight;

        }

        //使用水印图片设为div背景

        newMark.style.backgroundImage = "url("+ waterMarkPicUrl +")";

        //透明样式

        newMark.style.filter = "alpha(opacity=20)";

        //加入div

        windowobj.document.body.appendChild(newMark);

        var markStr = "var sobj ="+controlWindowStr+".document.getElementById('waterMark');sobj.style.width ="+controlWindowStr+".document.body.clientWidth;sobj.style.height ="+controlWindowStr+".document.body.clientHeight;";

        if(windowobj.document.body.onresize != null){

            var oldResiae = windowobj.document.body.onresize.toString();

             var oldResiaeStr = oldResiae.substr(oldResiae.indexOf("{")+1);

             var oldResiaeStr= oldResiaeStr.substr(0,oldResiaeStr.lastIndexOf("}"));

             oldResiaeStr+=";"+markStr;

             windowobj.document.body.onresize = new Function(oldResiaeStr);

        }else{

            windowobj.document.body.onresize = new Function(markStr);

        }

 }

JS加水印遮罩的更多相关文章

  1. 由于开发需求需要在附件查看页面添加水印，于是网上看到一位大牛写了一个js加水印的方法觉得很实用，也很方便，记录一下，哈哈

    大牛的博客链接:https://www.cnblogs.com/daixinyu/p/6715398.html 提供给大家学习 我优化了几点 1,我把水印的样式单独提出来,这样会提高渲染水印的性能 2 ...

  2. 用node.js给图片加水印

    一.准备工作: 首先,确保你本地已经安装好了node环境.然后,我们进行图像编辑操作需要用到一个Node.js的库:images.这个库的地址是:https://github.com/zhangyua ...

  3. 如何用node.js批量给图片加水印

    上一篇我们讲了如何用node.js给图片加水印,但是只是给某一张图片加,并没有涉及到批量处理.这一篇,我们学习如果批量进行图片加水印处理. 一.准备工作: 首先,你要阅读完这篇文章:http://ww ...

  4. Html加水印和禁用复制和右键（jquery.watermark.js）

    近期遇到一个需求,需要在页面背景加上自己的水印和禁止用户在页面复制粘贴 解决: 水印使用的是jquery.watermark.js插件,这个插件可以在html背景上加水印,同时可以设置相关属性值. 相 ...

  5. 使用Node.js给图片加水印的方法

    一.准备工作: 首先,确保你本地已经安装好了node环境. 然后,我们进行图像编辑操作需要用到一个Node.js的库:images. 这个库的地址是:https://github.com/zhangy ...

  6. Web 上传图片加水印

    上传图片加水印 需要使用控件FileUpload 上传按钮Image控件展示上传的图片,页面中拖入三个控件 <form id="form1" runat="serv ...

  7. 使用iText对pdf做权限的操作（不允许修改，不允许复制，不允许另存为），并且加水印等

    添加水印,并且增加权限 @Test public void addWaterMark() throws Exception{ String srcFile="D:\\work\\pdf\\w ...

  8. c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合，找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理（完全指北）

    c#封装DBHelper类   public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...

  9. vue + canvas 图片加水印

    思路:将两张图片绘制为一张 目标:输入的文字,绘制到图片上,简单实现图片水印 效果:输入的文字1: ‘你猜猜’ + 图片2 = 图片3(不要看清除水印的按钮,本人垃圾 没实现) 选择图片 html & ...

随机推荐

  1. hdu 1847 Good Luck in CET-4 Everybody! 组合游戏 找规律

    题目链接 题意 有\(n\)张牌,两人依次摸牌,每次摸的张数只能是\(2\)的幂次,最后没牌可摸的人为负.问先手会赢还是会输? 思路 0 1 2 3 4 5 6 7 8 9 10 11 -- P N ...

  2. 处理printf的变参问题

    VA_LIST 是在C语言中解决变参问题的一组宏,所在头文件:#include <stdarg.h> (1)首先在函数里定义一具VA_LIST型的变量,这个变量是指向参数的指针: (2)然 ...

  3. 使用p6spy格式化日志输出

    P6Spy 是针对数据库访问操作的动态监测框架(为开源项目,项目首 页:www.p6spy.com)它使得数据库数据可无缝截取和操纵,而不必对现有应用程序的代码作任何修改.P6Spy 分发包包括P6L ...

  4. dhcp 学习整理

    centos 6.5 rpm: dhcp-4.1.1-25.P1.el6.x86_64 dhcp-common-4.1.1-25.P1.el6.x86_64 服务: /etc/rc.d/init.d/ ...

  5. android 集成友盟分享之后，想自定义分享面板的看过来

    第一种情况 首先上传一张默认的友盟分享的效果图 看起来还不错,但是总是有这样那样的原因,需要我们对默认效果做出一些改变. 第二种情况 如果你想做出下面的效果: 或者这样的效果 : 总之上面的效果总是在 ...

  6. AC日记——[ZJOI2006]物流运输 bzoj 1003

    1003 思路: 最短路+dp: 节点在a-b天里不能使用 那么我们准备每一组a-b求一条最短路,如果没有,则用极大值表示: cost[a,b]记录这个最短路: 然后,开始dp: dp[i]=min( ...

  7. Java编程风格学习（一）

    最近在看一本有关Java编程规范的书,书中精炼阐述了使用java语言时应该遵循的一些原则.接下来的一段时间我将在这里总结我的学习内容,也希望这一系列文章能够对有需要的人有所帮助.不考虑任何编码规范的代 ...

  8. SecureCRT介绍、安装、使用（转）

    http://blog.csdn.net/liang19890820/article/details/49701429 简介 SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简 ...

  9. ASIHTTPRequest 问题总结

    1, ASIHttpRequest与30秒超时 今天在项目中发现一个ASIHttpRequest的Bug.这个Bug可能会导致你Http请求延时至少在timeout设置时间结束之后.更可怕的是,为了找 ...

  10. linux中文件描述符

    :: # cat ping.txt PING baidu.com (() bytes of data. bytes from ttl= time=32.1 ms bytes from ttl= tim ...