<%@ 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. 遍历简单XML节点

    原文发布时间为:2009-08-26 -- 来源于本人的百度文章 [由搬家工具导入] <?xml version="1.0" encoding="gb2312&qu ...

  2. FCKeditor2.6.4控件及其使用范例

    原文发布时间为:2009-06-14 -- 来源于本人的百度文章 [由搬家工具导入] 已经精简了，很小，不多说了，我的源代码去下载看。 web.config 看看。。。还有bin里面的dll就是控件， ...

  3. Berkeley DB使用SecondKey给数据排序的实现方法

    Berkeley DB使用SecondKey给数据排序的 实现方法是本文我们主要要介绍的内容,在做项目的时候用到了nosql数据库BDB,借此机会研究了一下它的用法.它的官方示例和文档比较丰富,感觉比 ...

  4. VIM的修炼等级

    用vim 快两年了 看过教程也不少,总的来说还是得自己多练习,当自己觉得有需要的时候,再添加功能.这里分享个看过的最好的教程,出自贴吧的某个朋友,写的很好 零 学会盲打 壹 配置文件先从最简开始,在 ...

  5. 昨天晚上写了个 Python 程序，下载了一个图片网站 5000 来张图片

    以前写的,目前已经失效了.. ------------------------------------------------------------------------------------- ...

  6. UnionFind（PYthon实现）

    UnionFind用于解决图的连通性问题,不需要给出具体路径的情况,可用来计算连通分支数 参考链接: https://blog.csdn.net/dm_vincent/article/details/ ...

  7. springBoot 读取配置文件yml中的信息

    yml中自定义一些变量 var: analyze_url: test ocr_url: test microsoft_key: test 映射到类变量中 @Getter @Component publ ...

  8. Android TextView 中实现部分文字变色以及点击事件

    首先要想实现文字变色以及点击,都需要使用到SpannableStringBuilder,实例化该类也很简单,只需将你想要处理的字符串当做参数 SpannableStringBuilder spanna ...

  9. go 函数回调

  10. 洛谷 P1464 Function【动态规划（递推）/记忆化搜索（递归）】

    题目描述 对于一个递归函数w(a,b,c) 如果a<=0 or b<=0 or c<=0就返回值1. 如果a>20 or b>20 or c>20就返回w(20,2 ...