JavaScript添加水印

页面动态添加水印，来自：http://www.cnblogs.com/GongQi/p/4074609.html?utm_source=tuicool&utm_medium=referral

<HTML><HEAD><TITLE> 水印 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></HEAD>
<script type="text/javascript">
//创建水印div---startvar mask_div = document.createElement('div');mask_div.id = 'mask_div1';mask_div.appendChild(document.createTextNode("test"));mask_div.style.position = "absolute";mask_div.style.left = '20px';mask_div.style.top = '20px';mask_div.style.overflow = "hidden";mask_div.style.zIndex = "9999";mask_div.style.opacity = 0.3;document.body.appendChild(mask_div);
//创建水印div---end//调用创建水印的方法---startfunction watermark(settings) {//默认设置var defaultSettings = {watermark_getid:"id",watermark_txt : "text",watermark_x : 20,//水印起始位置x轴坐标watermark_y : 20,//水印起始位置Y轴坐标watermark_rows : 30,//水印行数watermark_cols : 30,//水印列数watermark_x_space : 50,//水印x轴间隔watermark_y_space : 20,//水印y轴间隔watermark_color : '#000000',//水印字体颜色watermark_alpha : 0.3,//水印透明度watermark_fontsize : '18px',//水印字体大小watermark_font : '微软雅黑',//水印字体watermark_width : 100,//水印宽度watermark_height : 80,//水印长度watermark_angle : 15//水印倾斜度数};//采用配置项替换默认值，作用类似jquery.extendif (arguments.length === 1 && typeof arguments[0] === "object") {var src = arguments[0] || {};for (key in src) {if (src[key] && defaultSettings[key]&& src[key] === defaultSettings[key])continue;else if (src[key])defaultSettings[key] = src[key];}}var oTemp = document.createDocumentFragment();//获取页面最大宽度//var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);//获取div的宽度，将其宽度赋值给水印var width = document.getElementById(defaultSettings.watermark_getid).offsetWidth;var page_width =  Math.max(width,width);//获取页面最大长度   .offsetHeight//获取div的高度，将其高度赋值给水印var height = document.getElementById(defaultSettings.watermark_getid).offsetHeight//var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);var page_height = Math.max(height,height);//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔if (defaultSettings.watermark_cols == 0|| (parseInt(defaultSettings.watermark_x+ defaultSettings.watermark_width* defaultSettings.watermark_cols+ defaultSettings.watermark_x_space* (defaultSettings.watermark_cols - 1)) > page_width)) {defaultSettings.watermark_cols = parseInt((page_width- defaultSettings.watermark_x + defaultSettings.watermark_x_space)/ (defaultSettings.watermark_width + defaultSettings.watermark_x_space));defaultSettings.watermark_x_space = parseInt((page_width- defaultSettings.watermark_x - defaultSettings.watermark_width* defaultSettings.watermark_cols)/ (defaultSettings.watermark_cols - 1));}//如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔if (defaultSettings.watermark_rows == 0|| (parseInt(defaultSettings.watermark_y+ defaultSettings.watermark_height* defaultSettings.watermark_rows+ defaultSettings.watermark_y_space* (defaultSettings.watermark_rows - 1)) > page_height)) {defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space+ page_height - defaultSettings.watermark_y)/ (defaultSettings.watermark_height + defaultSettings.watermark_y_space));defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height* defaultSettings.watermark_rows)/ (defaultSettings.watermark_rows - 1));}var x;var y;for (var i = 0; i < defaultSettings.watermark_rows; i++) {y = defaultSettings.watermark_y+ (defaultSettings.watermark_y_space + defaultSettings.watermark_height)* i;for (var j = 0; j < defaultSettings.watermark_cols; j++) {x = defaultSettings.watermark_x+ (defaultSettings.watermark_width + defaultSettings.watermark_x_space)* j;var mask_div = document.createElement('div');mask_div.id = 'mask_div' + i + j;mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));//设置水印div倾斜显示mask_div.style.webkitTransform = "rotate(-"+ defaultSettings.watermark_angle + "deg)";mask_div.style.MozTransform = "rotate(-"+ defaultSettings.watermark_angle + "deg)";mask_div.style.msTransform = "rotate(-"+ defaultSettings.watermark_angle + "deg)";mask_div.style.OTransform = "rotate(-"+ defaultSettings.watermark_angle + "deg)";mask_div.style.transform = "rotate(-"+ defaultSettings.watermark_angle + "deg)";mask_div.style.visibility = "";mask_div.style.position = "absolute";mask_div.style.left = x + 'px';mask_div.style.top = y + 'px';mask_div.style.overflow = "hidden";mask_div.style.zIndex = "9999";//mask_div.style.border="solid #eee 1px";mask_div.style.opacity = defaultSettings.watermark_alpha;mask_div.style.fontSize = defaultSettings.watermark_fontsize;mask_div.style.fontFamily = defaultSettings.watermark_font;mask_div.style.color = defaultSettings.watermark_color;mask_div.style.textAlign = "center";mask_div.style.width = defaultSettings.watermark_width + 'px';mask_div.style.height = defaultSettings.watermark_height + 'px';mask_div.style.display = "block";oTemp.appendChild(mask_div);};};var divSt = document.getElementById(defaultSettings.watermark_getid);//得到需要处理水印的divdivSt.appendChild(oTemp);//将水印添加到，需要处理的div下面}
//调用创建水印的方法---end
</script><BODY><button οnclick="watermark({watermark_text : '测试水印',watermark_getid:'tableid' })"></button><div id="divId"><table width="500px" height="500px" border="1px" id="tableid"><tr><td>11</td><td>11</td><td>11</td><td>11</td></tr><tr><td>22</td><td>22</td><td>22</td><td>22</td></tr><tr><td>33</td><td>33</td><td>33</td><td>33</td></tr></table></div></BODY>
</HTML>

展示效果：

转载于:https://www.cnblogs.com/judylucky/p/5997769.html

JavaScript添加水印相关推荐

JavaScript给网页添加水印
设计前景 web页面需要提供打印功能,而且需要控制打印次数.因此给原网页添加水印,并且添加按钮去控制打印功能. 设计思路 1.给原网页进行添加水印,进行控制,避免使用浏览器的打印功能. 2.添加打印区 ...
jQuery图片自动添加水印插件
JS脚本(jQuery)为图片加水印效果预览: http://hovertree.com/texiao/jquery/94/ 本功能使用HTML5实现,可为图片加上文字水印,可设置文字,设置颜色,位置 ...
[JavaScript]使用opencv.js实现基于傅里叶变换的频域水印(隐水印)
PS:查了多方资料,都没有提到用 JavaScript 来实现频域水印的教程,故经过笔者的实践,遂写一篇教程来简单介绍. 通过了解频域水印的相关知识,我理解了频域水印就是先将图片进行傅里叶变换,得到频 ...
使用watermark.js给HTML、Word、PPT、Excel等添加水印
转自:https://blog.csdn.net/Aria_Miazzy/article/details/99649926 使用watermark.js给HTML.Word.PPT.Excel等添加水 ...
html 水印插件,Watermark.js 在浏览器端添加水印插件 - 文章教程
Watermark.js 是一个 JavaScript 框架用于以批量的方式对图片插入水印.它利用 HTML5 canvas 标签实现,只要为图片添加特定的 Class 就能添加水印.采用 ES6 编 ...
为网页中的图片添加水印的效果
程序本来源于http://dev.csdn.net/develop/article/22/22096.shtm中lovered所写的程序,我把其中的一些我觉得不太好的加以了改进并且增加一些功能形成了该 ...
Java向word文档中添加水印
前言: 水印可以说是一个标识,有时我们希望向文档中插入公司名称作为水印,或者将公司logo插入到文档中作为水印.先来看看本地word文档如何插水印吧! 然后选择图片水印或者文字水印即可. 那么想要通过 ...
html中加水印,html中实现添加水印的功能
最近项目需求中需要在html中添加水印效果,试验了一下几种方法 1.使用背景图添加水印 2.使用定位添加水印 3.使用js添加可配置控制水印 CSS: body{background-color: # ...
web项目引入PDF.js并添加水印禁止下载
目录 web项目引入PDF.js并添加水印禁止下载下载并引入PDF.js实现预览动态预览PDF文件隐藏打开.下载.打印等功能禁止键盘组合按键下载或另存为禁用鼠标操作添加全局水印 PDF文件 ...

JavaScript添加水印

JavaScript添加水印相关推荐

最新文章

热门文章