<%@ 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. 模仿原生淘宝app点击搜索时的页面滑动效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. JDBC连接池&DBUtils使用

    使用连接池改造JDBC的工具类: 1.1.1          需求: 传统JDBC的操作,对连接的对象销毁不是特别好.每次创建和销毁连接都是需要花费时间.可以使用连接池优化的程序. * 在程序开始的 ...

  3. [转]在Storyboard中使用自定义的segue类型

    转自:http://my.oschina.net/u/728866/blog/92709 我们知道segue共有三种类型:push.modal以及custom.如下图:   很明显,这三种类型的作用分 ...

  4. [Oracle] 某游戏大区DB IO负载过高分析

    某游戏大区DB IO负载过高分析 [问题] 下图信息看出机器IO负载过高, IO使用率: 平均值 50%, 峰值 98%, 业务高峰时间段(19:00-22:00)IO使用率持续80%以上. [分析] ...

  5. C# 时间戳和普通时间相互转换

    // 时间戳转为C#格式时间 private DateTime StampToDateTime(string timeStamp) { DateTime dateTimeStart = TimeZon ...

  6. 使用Nginx+FFMPEG搭建HLS直播转码服务器

    目的:使Nginx支持Rtmp协议推流,并支持hls分发功能及FFMPEG转码多码率功能. 一.准备工作 模块:nginx-rtmp-module-master(支持rtmp协议) 下载地址: htt ...

  7. （2）WCF客户端调用

    一.visual studion引用生成代理 引入服务端发布元数据的地址(并不是服务的地址) 用服务端是控制台程序 例子1 服务端的配置 <system.serviceModel> < ...

  8. 聊聊、Zookeeper Linux 单服务

    关于上一篇 Zookeeper 的文章是介绍安装启动,这一篇介绍独立服务,也就是单台 Zookeeper 提供服务.首先登陆 Linux 系统,确保网络通畅.如果遇到找不到网卡 eth0 情况,可以先 ...

  9. 【IntelliJ Idea】idea快速创建maven spring项目

    想试试AOP在spring的web项目上的使用情况,所以想尽快使用idea快速的搭建一个spring的web项目,当然,是maven管理的项目 步骤如下: 1.打开idea 左上角file---> ...

  10. 新学到的linux命令

    whatis xxx whatis ls 会返回一个ls的简要说明,可以简单的告诉你该命令的作用,不用man去看一大堆没啥用的英文 HISTTIMEFORMAT="%d/%m/%y %T & ...