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>
