javascript canvas给图片加水印

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

javascript canvas给图片加水印
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>添加水印</title>
		<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
			* {margin: 0; padding: 0;}
		</style>
	</head>
	<body style="padding: 10px;">
		<p>
		[.设置图片
		</p>
		<p>
			
			<input type="text" id="j_url" value="http://www.baidu.com/img/baidu_logo.gif" style=""/>
		</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=""/>;Y-<input type="text" id="j_y" value="20" style=""/>  
			<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"     style="border:1px solid #ccc; background-color: #ccc"> 您的浏览器不支持Canvas，请升级浏览器到最新版本再尝试 </canvas>

</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;
}

/*
 * 
 *
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>

提示：您可以先修改部分代码再运行