给图片加水印_转自聚教程网http://www.111cn.net/js_a/javascript/37250.htm
来源：互联网 发布：淘宝卖家折扣出错 编辑：程序博客网 时间：2024/05/17 08:46
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 = 3function 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> 0 0
- 给图片加水印_转自聚教程网http://www.111cn.net/js_a/javascript/37250.htm
- javascript：深入理解闭包——转自http://www.jb51.net/article/24101.htm
- 收藏常用正则表达式 转自shuguang http://www.osphp.com.cn/read.php/453.htm
- ARM与51通信【转自：http://www.ivchen.cn/read.php/183.htm】
- 智能指针（转自http://www.bianceng.cn/Programming/cplus/201004/16443.htm）
- 嵌入式从业人员调查报告（转自：http://www.farsight.com.cn/survey2/report.htm）
- 委托模式（转自：http://www.uml.org.cn/j2ee/200411036.htm）
- Sed学习笔记--转自http://www.tsnc.edu.cn/default/tsnc_wgrj/doc/sed.htm
- asp.net 中给图片加水印
- Asp.net给图片加水印
- 用OLE操作Excel(目前最全的资料)-转自http://www.lewensky.cn/read.php/212.htm
- 给图片加水印
- 给图片加水印
- 给图片加水印
- 给图片加水印
- 给图片加水印
- 给图片加水印
- 给图片加“水印”
- SQlite命令行工具的使用
- 线程函数中的某段代码，总是抛出异常，不解？
- Linux系统修改编码
- 我是怎么招聘程序员的
- 记录一种Json转Model的思路
- 给图片加水印_转自聚教程网http://www.111cn.net/js_a/javascript/37250.htm
- 课程设计
- struts2中ActionContext是什么东西？
- Artistic Style在windows下的使用(C/C++)
- 外网访问自己的tomcat
- wordpress rewrite 正则
- 虚幻4UMG的锚点
- el表达式跟ognl表达式的区别(用法和页面取值)
- Swift之文件管理
