Tip: you can modify some code before running
Adding watermarks to images using javascript canvas<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Add watermark</title><style type="text/css">* {Margin: 0; padding: 0 ;}</style></head><body ><p>[. Set images</p><p><!--<input type="radio" name="pic" checked="checked" value="network"/>--><input type="text" id="j_url" value="yun_qi_img/baidu_logo.gif" /></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>. Watermark content</p><p><input type="text" id="j_txt" value="文字" /> <input type="button" class="btn" id="j_setWaterMark" value="设置水印" /></p><br /><p>]. Effect</p><p><label>Add shadow<input type="checkbox" id="j_shadow" /></label></p><p>Font color<select id="j_color"><option value="#000000">Black</option><option value="#AEAEAE">Gray</option><option value="#0000FF">Blue</option><option value="#FFFF00">Yellow</option><option value="#008000">Green</option><option value="#871F78">Purple</option></select></p><p>Font Name<select id="j_fontFamily"><option value="宋体"></option><option value="黑体">Simhei</option><option value="微软雅黑"></option><option value="Arial">Arial</option></select></p><p>Font size<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>Coordinates: X-<input type="text" id="j_x" value="20" />; Y-<input type="text" id="j_y" value="20" /> <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>Font style<select id="j_fontStyle"><option value="normal" selected>Normal</option><option value="italic">Italics</option></select></p><br /><p><input type="button" class="btn" id="j_reset" value="重 置" /></p><br /><canvas id="canvas" width="600" height="400" >Your browser does not support Canvas. Please upgrade your browser to the latest version and try again</canvas><pre class="codes"></pre></body></html><script type="text/javascript">/** [Img] http://www.baidu.com/img/baidu_logo.gif?/img] * [img] yun_qi_img/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 f Alse ;}}/ *** WaterMark. run ({// x: 40, // y: 40, // mark: 'Baidu ', // 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 = 'watermark', moveStep = 1, obj = null, dX = 20, dY = 20, shadowOffs Et = 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 = '';}/** move the watermark content position * 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 (); main1_( {}) ;}// main operation part: function main1_( 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: mainparameters} () // Configure the parameter WaterMark. conf ('canvas '); // sets the image button event 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 ('Enter an image address'); return;} WaterMark. run ({img: uri}) ;}) addEvent ($ ('J _ setwatermark'), 'click', function () {var txt = $ ('J _ txt '). value; if (txt. length <= 0) {alert ('Enter the WaterMark content'); 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>
Tip: you can modify some code before running
