给图片加水印_转自聚教程网http://www.111cn.net/js_a/javascript/37250.htm

转载 2015年07月10日 11:47:20
javascript canvas给图片加水印
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>添加水印</title>
		<style type="text/css">
			* {margin: 0; padding: 0;}
		</style>
	</head>
	<body style="padding: 10px;">
		<p>
		[.设置图片
		</p>
		<p>
			<!--<input type="radio" name="pic" checked="checked" value="network"/>-->
			<input type="text" id="j_url" value="http://www.baidu.com/img/baidu_logo.gif" style="width:500px;"/>
		</p>
		<!--<p>
			<input type="radio" name="pic" value="localfile"/>
			<input type="file" id="j_file" value=""/>
		</p>-->
		<p>
			<input type="button" class="btn" id="j_setPic" value="设置图片" />
		</p>
		<br />
		<p>
		.水印内容
		</p>
		<p>
			<input type="text" id="j_txt" value="文字" /> <input type="button" class="btn" id="j_setWaterMark" value="设置水印" />
		</p>
		<br />

		<p>
		].效果
		</p>
		<p>
			<label>加阴影 <input type="checkbox" id="j_shadow" /></label>
		</p>
		<p>
			字体颜色 
			<select id="j_color">
				<option value="#000000">黑色</option>
				<option value="#AEAEAE">灰色</option>
				<option value="#0000FF">蓝色</option>
				<option value="#FFFF00">黄色</option>
				<option value="#008000">绿色</option>
				<option value="#871F78">紫色</option>
			</select>
		</p>
		<p>
			字体名称 
			<select id="j_fontFamily">
				<option value="宋体">宋体</option>
				<option value="黑体">黑体</option>
				<option value="微软雅黑">微软雅黑</option>
				<option value="Arial">Arial</option>
			</select>
		</p>
		<p>
			字体大小 
			<select id="j_fontSize">
				<option value="12" selected>12px</option>
				<option value="13">13px</option>
				<option value="14">14px</option>
				<option value="15">15px</option>
				<option value="16">16px</option>
				<option value="17">17px</option>
				<option value="18">18px</option>
			</select>
		</p>
		<p>
			坐标: X-<input type="text" id="j_x" value="20" style="width:40px;"/>;Y-<input type="text" id="j_y" value="20" style="width:40px;"/>  
			<input type="button" value="上移" id="j_top"/>
			<input type="button" value="下移" id="j_bottom"/>
			<input type="button" value="左移" id="j_left"/>
			<input type="button" value="右移" id="j_right"/>
		</p>
		<p>
			字体样式 
			<select id="j_fontStyle">
				<option value="normal" selected>正常</option>
				<option value="italic">斜体</option>
			</select>
		</p>
		<br />
		<p>
			<input type="button" class="btn" id="j_reset" value="重 置" />
		</p>
		<br />
		<canvas id="canvas" width="600" height="400"   style="border:1px solid #ccc; background-color: #ccc"> 您的浏览器不支持Canvas,请升级浏览器到最新版本再尝试 </canvas>


<pre class="codes">

</pre>
	</body>
</html>
<script type="text/javascript">
/*
 * [img]http://www.baidu.com/img/baidu_logo.gif[/img]
 * [img]http://www.google.com.hk/intl/zh-CN/images/logo_cn.png[/img]
 **/
function $(elem) {
	return document.getElementById(elem) || elem;
}

function addEvent(obj, evType, fn){
	if (obj.addEventListener) {
		obj.addEventListener(evType, fn, false);
		return true;
	}
	else {
		if (obj.attachEvent) {
			var r = obj.attachEvent("on" + evType, fn);
			EventCache.add(obj, evType, fn);
			return r;
		}
		else {
			return false;
		}
	}
}

/*
 * 
 *
WaterMark.run({
//x:40,
//y:40,
//mark:'百度',
//color: '#f0f',
//hasShadow:0,
//fontSize: 18,
//fontFamily:'微软雅黑',
//fontStyle: 'normal'
})
*/
var WaterMark = (function(){

	var
	  colorSet     = '#000',
	  ctx          = null,
	  font         = '',
	  fontFamily   = 'arial',
	  fontSize     = '12',
	  fontStyle    = 'normal',     // normal | italic
	  hasShadow    = 0,
	  img          = new Image(),
	  mark         = '水印',
	  moveStep     = 1,
	  obj          = null,
	  dX           = 20,
	  dY           = 20,
	  shadowOffset = 3


	function setImg(uri) {
		img.src = uri;
		img.onload = function(){
			obj.width = img.width;
			obj.height = img.height;
			setTimeout(function(){
				ctx.drawImage(img, 0, 0);
			}, 100)
		}
	}

	function config(elem) {
		obj = document.getElementById(elem);
		ctx = obj.getContext('2d');
	}

	function openShadow() {
		ctx.shadowOffsetX = shadowOffset;
		ctx.shadowOffsetY = shadowOffset;
		ctx.shadowColor = '#AEAEAE';
		ctx.shdowBlur = 3;
	}

	function closeShadow() {
		ctx.shadowOffsetX = 0;
		ctx.shadowOffsetY = 0;
		ctx.shadowBlur = 0;
	}

	function refresh() {
		ctx.drawImage(img, 0, 0);
	}

	function reset() {
		refresh();
		mark = '';
	}

	/*
	 * 移动水印内容位置
	 * param: pos {string} left | right | top | bottom
	 **/
	function move(pos) {
		if (mark == '') {return;}
		
		var p;

		if (pos == 'left' || pos == 'right') {
			p = pos == 'left' ? 1 : -1;
			dX -= (p * moveStep);
		} else if (pos == 'top' || pos == 'bottom') {
			p = pos == 'top' ? 1 : -1;
			dY -= (p * moveStep);
		}
		refresh();
		mainOper({});
	}

	// 主要操作部分
	function mainOper(o) {
		if (ctx == null) {return ;}
		if (o.mark == null && mark == '') {return;}
		
		dX = o.x || dX;
		dY = o.y || dY;
		colorSet = o.color || colorSet;
		fontStyle = o.fontStyle || fontStyle;
		fontFamily = o.fontFamily || fontFamily;
		mark = o.mark || mark;

		if (o.hasShadow !== null && o.hasShadow !== undefined) {
			hasShadow = o.hasShadow;
		}
		if (o.img !== null && o.img !== undefined) {
			setImg(o.img);
		}
		if (!!o.fontSize) {
			fontSize = parseInt(o.fontSize);
		}

		refresh();
		ctx.fillStyle = colorSet;
		hasShadow ? openShadow() : closeShadow();
		font = fontStyle + ' ' + fontSize + 'px ' + fontFamily;
		ctx.font = font;
		ctx.fillText(mark, dX, dY);
	}

	return {
		conf    : config,
		reset   : reset,
		move    : move,
		run     : mainOper
	}
})()

// 配置参数
WaterMark.conf('canvas');

// 设置图片按钮事件
addEvent($('j_setPic'), 'click', function(){
//	var pic = document.getElementsByName('pic');
	var uri;

//	if (pic[0].checked) {
		uri = $('j_url').value.replace(/s+/g,'');
//	} else if(pic[1].checked){
//		alert(GetFullPath($('j_file')));
//		return;
//		uri = 'file:///' +  $('j_file').value.replace(/s+/g,'');
//	}

	if (uri.length <= 0) {
		alert('请输入一个图片地址');
		return;
	}
	WaterMark.run({img: uri});

})

addEvent($('j_setWaterMark'), 'click', function(){
	var txt = $('j_txt').value;

	if (txt.length <= 0) {
		alert('请输入水印内容');
		return;
	}

	WaterMark.run({mark: txt});
})


addEvent($('j_shadow'), 'click', function(){
	var bShadow = $('j_shadow').checked;
	WaterMark.run({hasShadow: bShadow});
})

addEvent($('j_color'), 'change', function(){
	var color = $('j_color').value;
	WaterMark.run({color: color});
})

addEvent($('j_fontFamily'), 'change', function(){
	var fontFamily = $('j_fontFamily').value;
	WaterMark.run({fontFamily: fontFamily});
})

addEvent($('j_fontSize'), 'change', function(){
	var size = $('j_fontSize').value;
	WaterMark.run({fontSize: size});
})

addEvent($('j_x'), 'keyup', function(){
	var x = parseInt($('j_x').value);
	WaterMark.run({x: x});
})
addEvent($('j_y'), 'keyup', function(){
	var y = parseInt($('j_y').value);
	WaterMark.run({y: y});
})

addEvent($('j_top'), 'click', function(){
	WaterMark.move('top');
})
addEvent($('j_bottom'), 'click', function(){
	WaterMark.move('bottom');
})
addEvent($('j_left'), 'click', function(){
	WaterMark.move('left');
})
addEvent($('j_right'), 'click', function(){
	WaterMark.move('right');
})

addEvent($('j_fontStyle'), 'change', function(){
	var fontStyle = $('j_fontStyle').value;
	WaterMark.run({fontStyle: fontStyle});
})

addEvent($('j_reset'), 'click', function(){
	WaterMark.reset();
})
</script>

前端小程序——js+canvas 给图片添加水印

图片来自网络 市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧 html: 点击添加水印 画完页面就是这个样子了...
  • gjq1993
  • gjq1993
  • 2017年03月03日 14:31
  • 2390

Java图片水印生成器代码 - 批量给自己的网站图片加水印

Java图片水印生成器代码 - 批量给自己的网站图片加水印 最近在做一款APP,App中的图片是自己一个个的画出来的,为了保证图片不被盗用和处理,所以就需要加上水印防盗。这跟CSDN一样。 注意事项:...
  • chwshuang
  • chwshuang
  • 2016年06月15日 23:30
  • 2862

JavaScript给网页添加水印

设计前景 web页面需要提供打印功能,而且需要控制打印次数。因此给原网页添加水印,并且添加按钮去控制打印功能。 设计思路 1、给原网页进行添加水印,进行控制,避免使用浏览器的打印功能。 2、添加打印区...
  • wenxuechaozhe
  • wenxuechaozhe
  • 2016年07月16日 15:00
  • 19891

javascript:深入理解闭包——转自http://www.jb51.net/article/24101.htm

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 一、变量的作用域 要理解闭包,首先必须理解Javascript...
  • Hello_World003
  • Hello_World003
  • 2015年04月11日 16:26
  • 750

.net C# 反射技术使用例子(转自:http://www.programbbs.com/doc/5740.htm)

获得实例的方法1.获得同一程序集内的类型的实例。 无参数构造函数Type t = Type.GetType("AppCode.Employe");if (t == null){textBox1.Tex...
  • lslxdx
  • lslxdx
  • 2011年05月06日 18:44
  • 596

重学C++(2)——指向类成员的指针(转自:http://www.wangchao.net.cn/bbsdetail_73812.html)

class A   {    int _val;    int val();   };   int (A::*p_val) = &A::_val;   int ( A::*p_func )() = &...
  • lslxdx
  • lslxdx
  • 2011年10月16日 21:58
  • 721

C# javaScript函数的相互调用 详细出处参考:http://www.jb51.net/article/16870.htm

问:  1.如何在JavaScript访问C#函数?  2.如何在JavaScript访问C#变量?  3.如何在C#中访问JavaScript的已有变量?  4.如何在C#中访问JavaSc...
  • newnazi
  • newnazi
  • 2014年03月05日 14:39
  • 744

ASP.NET操作EXCEL的总结篇(转自http://www.jb51.net/article/26273.htm)

公元19XX年前,关于EXCEL的操作就如滔滔江水,连绵不绝,真正操作EXCEL我也是从去年下半年开始的,有些比较复杂的年度报表之类的,做起来也有点费力,不过还是都能画出来了,关于EXCEL的报表导出...
  • liulu132
  • liulu132
  • 2013年05月09日 16:26
  • 759

php中如何将图片储存在数据库里 详细出处参考:http://www.jb51.net/article/8733.htm

记录下 如果你想把二进制的数据,比如说图片文件和HTML文件,直接保存在你的MySQL数据库,那么这篇文章就是为你而写的!我将告诉你怎样通过HTML表单来储存这些文件,怎样访问和使用这些文件...
  • ww122081351
  • ww122081351
  • 2013年10月07日 10:39
  • 898

js关闭当前页面(窗口)的几种方式总结(原文:http://www.jb51.net/article/34502.htm)

window.open 只打开一个窗口是将      oNewWindow   =   window.open(   sURL   ,   sName   ,   sFeatures   ,   b...
  • weimeixiehou
  • weimeixiehou
  • 2017年07月06日 10:19
  • 913
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:给图片加水印_转自聚教程网http://www.111cn.net/js_a/javascript/37250.htm
举报原因:
原因补充:

(最多只允许输入30个字)