<%@ 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. dva脚手架 dva-cli 配置roadhogrc，antd-mobile样式按需加载 不生效的问题

    1.新安装dva-cli脚手架版本0.9.2,dva版本是2.4.1,roadhogrc版本是2.4.9 roadhogrc2 与1 的区别把roadhogrc 改成了webpackrc 所以配置an ...

  2. 【git】把本地项目和远程git仓库相连通

    1. 打开在你的项目文件夹,输入下面的命令 git init 输完上面的命令,文件夹中会出现一个.git文件夹,如下图所示,其他的的文件也会出现蓝色小问号的标志 2. 添加所有文件 git add . ...

  3. vue 设置头文件

    vue的头文件是在index.html文件中设置的,毕竟vue的入口 先说一下标签页的名字: 就是这个名字的设置,要想每个标签页的名字都不一样,需要做以下这三步:1. 首先,在index.html文件 ...

  4. python日期时间相关

    参考: http://www.coder4.com/archives/2239 http://www.cnblogs.com/lhj588/archive/2012/04/23/2466653.htm ...

  5. MongoDB的使用[转]

    http://www.cnblogs.com/TankMa/archive/2011/06/08/2074947.html

  6. 爬虫学习笔记（六）PyQuery模块

    PyQuery模块也是一个解析html的一个模块,它和Beautiful Soup用起来差不多,它是jquery实现的,和jquery语法差不多,会用jquery的人用起来就比较方便了. Pyquer ...

  7. SQL Server Debugging with WinDbg – an Introduction

    Klaus Aschenbrenner Klaus Aschenbrenner provides independent SQL Server Consulting Services across E ...

  8. android 内存泄漏出现的情况

    非静态内部类的静态实例由于内部类默认持有外部类的引用,而静态实例属于类.所以,当外部类被销毁时,内部类仍然持有外部类的引用,致使外部类无法被GC回收.因此造成内存泄露. 类的静态变量持有大数据对象静态 ...

  9. Flak快速上手

    本文介绍如何上手 Flask . 这里假定你已经安装好了 Flask ,否则请先阅读< 安装>. 如果已安装好Flask,通过以下命令查看 一个简单的例子: from flask impo ...

  10. CentOS SVN 服务器搭建

    源码目录:/home/user/project 工程名:project 工程目录:/source/svn/project 访问地址:svn://ip/project 一. 安装svn yum inst ...