Javascript 网页水印(非图片水印)实现代码

1 概述
1.1 定义
在一些B/S结构的应用系统中，有很多页面是需要有水印的。常见的就是公文系统、合同系统等。大家常常关注的是网站图片增加水印，而很少关注页面水印。刚去Google了一圈，关于页面水印的文章的数量为几乎为0. 本文中，流牛木马就与大家一起交流一下有关制作网页水印的心得。
本文讨论以下的情形： 新增水印的方法需要用Javascript完成，并要求能够方便地加入到原有的页面中，不能影响到已有的功能。
1.2 预期目标
就图片水印实现方案来说，我们预期至少包括以下几个目标：
1. 实现悬浮、半透明的图片水印
2. 包含水印的页面，所有元素均为只读(不可写)
3. 在包含框架页面中，可以控制任意一个子页面或父页面的水印生成
4. 在页面放大、缩小(resize过程)后，需要在保证页面不刷新的前提下，重新生成适应页面大小的新水印，以保证所有内容都被水印覆盖，并且不会因水印图片范围过大而产生滚动条。
5. 支持IE6\7\8浏览器。暂不考虑其他浏览器。
1.3 效果图
加密前：
 

加密后：


可以打开附件里的文件进行查看。
2 实现步骤
2.1 基本构思
加密的过程是一个Javascript函数执行过程，所以我们首先应该考虑用Javascript操作DOM对象的方式。
在已有的HTML页面中，新建一个DOM对象在Body节点下。该对象的长、宽均经过计算，保证在覆盖全部页面内容的同时又不产生滚动条。将该对象覆盖到原有的页面之上，设置背景图，并设置为透明。
创建新DOM元素：
使用document对象里的createElement方法。创建元素后，设置它的z-index为一个大整数，保证它能够比已有网页的最大z-index大，才能完成“覆盖”。
计算新对象大小：
利用三个DOM对象值： clientWidth 、scrollHeight与clientHeight.
网页中一般不会出现横向滚动条，故不使用scrollWidth.
而纵向的滚动条就很常见了。
为了保证页面内容全部覆盖，在未出现滚动条的时候，使用clientHeight，出现滚动条后，则使用scrollHeight。
设置透明：
利用Alpha值。Alpha是IE支持的css filter。
2.2 应变细节
有一个小细节是很有意思的，前文也提过了，就是resize的过程。
试想，当一个页面打开的时候是550px×400px，那么自然会生成550px×400px大小的水印。但当用户对它进行最大化时，页面没有刷新，不会重新执行生成水印的函数，那么以前生产的水印图片就太小了。
如下图所示的情况。请注意，它的右侧、下侧都是没有水印的。
 
为了应对这种情况，我们就需要对body的onresize()函数进行处理。如果以前定义没有onresize()函数，则直接添加onresize()；如果以前有onresize()函数，则对之进行修改。
2.3 最终代码
考虑到框架页面需要考虑的情况，该方法包括三个参数： 目标页面对象、目标页面字符串、 背景图片。


代码如下:

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;
newMark.style.position = "absolute";
newMark.style.zIndex = "9527";
newMark.style.top = "0px";
newMark.style.left = "0px";
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;
}
newMark.style.backgroundImage = "url("+ waterMarkPicUrl +")";
newMark.style.filter = "alpha(opacity=50)";
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);
}
}

3 原有页面处理
需要在原有的<body>标签处加入一个onload方法。如：
<body onload="GetWaterMarked(window,'watermark.jpg','this')">
4 附件
演示地址 http://demo.jb51.net/js/js_wartermark/baidu_mark.htm
附件下载
http://xiazai.jb51.net/201003/yuanma/js_wartermark.rar

赞 (0)

相关推荐

  • php文字水印和php图片水印实现代码(二种加水印方法)

    php文字水印和php图片水印实现代码(二种加水印方法)

    文字水印 文字水印就是在图片上加上文字,主要使用gd库的imagefttext方法,并且需要字体文件.效果图如下: 实现代码如下: 复制代码 代码如下: $dst_path = 'dst.jpg'; //创建图片的实例$dst = imagecreatefromstring(file_get_contents($dst_path)); //打上文字$font = './simsun.ttc';//字体$black = imagecolorallocate($dst, 0x00, 0x00, 0x

  • C#(.net)水印图片的生成完整实例

    本文以一个完整实例讲述了C#水印图片的生成方法.是非常实用的技巧.分享给大家供大家参考. 具体实例代码如下: /* * * 使用说明: * 建议先定义一个WaterImage实例 * 然后利用实例的属性,去匹配需要进行操作的参数 * 然后定义一个WaterImageManage实例 * 利用WaterImageManage实例进行DrawImage(),印图片水印 * DrawWords()印文字水印 * */ using System; using System.Drawing; using

  • C# 添加图片水印类实现代码

    复制代码 代码如下: using System; using System.Collections.Generic; using System.Text; using System.Drawing; using System.IO; using System.Drawing.Imaging; using System.Web; using System.Drawing.Drawing2D; using System.Reflection; namespace Chen { public clas

  • Asp.net 文件上传类(取得文件后缀名,保存文件,加入文字水印)

    复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; usi

  • PHP 图片水印类代码

    支持文字水印.图片水印 支持水印的位置随机或固定(九宫格) 水印透明度设置(图片水印和文字水印都支持) 文字水印的字体.颜色.大小设置 图片水印的背景透明 复制代码 代码如下: <?php /** * 加水印类,支持文字图片水印的透明度设置.水印图片背景透明. * 日期:2011-09-27 * 作者:www.jb51.net * 使用: * $obj = new WaterMask($imgFileName); //实例化对象 * $obj->$waterType = 1; //类型:0为文

  • 浅析iOS给图片加水印的方法

    浅析iOS给图片加水印的方法

    话不多说,直接上代码 新建了一个UIImage的类目,在.h中声明 + (UIImage *)imageWithimage:(UIImage *)image content:(NSString *)content frame:(CGRect)frame; .m如下 + (UIImage *)imageWithimage:(UIImage *)image content:(NSString *)content frame:(CGRect)frame { // 开启图形'上下文' UIGraphic

  • php图片加水印原理(超简单的实例代码)

    文字水印: 复制代码 代码如下: $w = 80; $h = 20; $im = imagecreatetruecolor($w,$h); $textcolor = imagecolorallocate($im, 123, 12, 255); $white = imagecolorallocate($im, 255, 255, 255); $grey = imagecolorallocate($im, 128, 128, 128); $black = imagecolorallocate($im

  • IOS给图片添加水印（两种方式）

    为了防止自己辛苦做的项目被别人盗走,采取图片添加水印,在此表示图片的独一无二.加水印不是在上面添加几个Label,而是我们把字画到图片上成为一个整体,下面小编给大家分享IOS给图片添加水印(两种方式). 提供一个方法,此方法只需要传递一个要加水印的图片和水印的内容就达到效果. 第一种方式: -(UIImage *)watermarkImage:(UIImage *)img withName:(NSString *)name { NSString* mark = name; int w = img

  • Javascript 网页水印(非图片水印)实现代码

    Javascript 网页水印(非图片水印)实现代码

    1 概述 1.1 定义 在一些B/S结构的应用系统中,有很多页面是需要有水印的.常见的就是公文系统.合同系统等.大家常常关注的是网站图片增加水印,而很少关注页面水印.刚去Google了一圈,关于页面水印的文章的数量为几乎为0. 本文中,流牛木马就与大家一起交流一下有关制作网页水印的心得. 本文讨论以下的情形: 新增水印的方法需要用Javascript完成,并要求能够方便地加入到原有的页面中,不能影响到已有的功能. 1.2 预期目标 就图片水印实现方案来说,我们预期至少包括以下几个目标: 1. 实

  • Java添加Word文本水印和图片水印

    Java添加Word文本水印和图片水印

    水印是一种常用于各种文档的声明.防伪手段,一般可设置文字水印或者加载图片作为水印.以下内容将分享通过Java编程给Word文档添加水印效果的方法,即 文本水印 图片水印 使用工具:Free Spire.Doc for Java (免费版) Jar导入 方法1:通过官网下载控件包.在程序下新建一个directory目录,并命名(本示例中命名为lib):将控件包lib文件夹下的jar(如下图1)复制到程序中新建的目录下. 图1: 复制jar文件后,鼠标右键点击jar文件,选择"Add as Libr

  • Python爬虫爬取一个网页上的图片地址实例代码

    Python爬虫爬取一个网页上的图片地址实例代码

    本文实例主要是实现爬取一个网页上的图片地址,具体如下. 读取一个网页的源代码: import urllib.request def getHtml(url): html=urllib.request.urlopen(url).read() return html print(getHtml(http://image.baidu.com/search/flip?tn=baiduimage&ie=utf-8&word=%E5%A3%81%E7%BA%B8&ct=201326592&am

  • PHP添加文字水印或图片水印的水印类完整源代码与使用示例

    PHP实现的给图片添加水印功能,可添加文字水印或图片水印,使用文字水印时需要提供字体文件,使用图片水印时需要提供水印图片,水印图片不能比要添加水印的图片大,请使用背景透明的水印图片. 该水印类支持自定义水印位置.自定义水印大小和水印的透明度,字体水印可自定义颜色等,功能已相应完善. 完整源代码如下(注解中已给出使用示例): <?php /** * 图片加水印类,支持文字水印.透明度设置.自定义水印位置等. * 使用示例: * $obj = new WaterMask($imgFileName);

  • JS利用Canvas实现文字水印和图片水印合成

    目录 介绍 文字水印 图片水印 介绍 给图片添加水印可以帮助网站或作者保护自己的版权,或防止内容被别人利用.给图片添加水印分为添加文字水印和添加图片水印,水印一般都做成半透明的,这样不至于影响原图内容的浏览.Canvas 图片水印合成与 Canvas 实现图片压缩 原理基本相同: CanvasRenderingContext2D.drawImage(image, dx, dy, dWidth, dHeight) 方法可以从页面 DOM 元素作为图像源来根据坐标和大小重新绘制该图像. HTMLCa

  • Java图片处理 (文字水印、图片水印、缩放、补白)代码实例

    package com.hmw.picMark; import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.Image; import java.awt.geom.AffineTransform; import java.awt.image.AffineTransformOp; import java.awt.im

  • PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】

    本文实例讲述了PHP的图像处理.分享给大家供大家参考,具体如下: 1.添加文字水印 //1.打开图片资源 $src="./material/sea.jpg"; $info=getimagesize($src);//获取图片信息 $type=image_type_to_extension($info[2],false);//转化图片类型 //var_dump($info); $fun="imagecreatefrom{$type}";//拼接成为imagecreate

  • 简单的java图片处理类(图片水印 图片缩放)

    复制代码 代码如下: import java.awt.AlphaComposite;import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.Image;import java.awt.Toolkit;import java.awt.color.ColorSpace;import java.awt.geom.AffineTransfo

  • JAVA图片水印开发案例详解

    JAVA图片水印开发案例详解

    写在最前面 上周零零碎碎花了一周的时间研究水印的开发,现在终于写了个入门级的Demo,做下笔记同时分享出来供大家参考. Demo是在我上次写的 JAVA实用案例之文件导入导出(POI方式) 框架基础上搭建的,基于Spring+SpringMVC.如果有错误还请大家指正. 最后源码地址在:https://github.com/allanzhuo/myport.git . 简单介绍 水印开发是web开发中一种比较常见的功能,实现的代码很简单,具体的实现步骤我也会以代码为基础详细讲述.其实以我个人的理

随机推荐