首页 > 代码库 > html5 canvas+原生javascript 实时获取文本框内容绘制图片水印
html5 canvas+原生javascript 实时获取文本框内容绘制图片水印
最近有位客户要求在网页图片上加文字水印效果，并且内容是从当前网页的文本输入框实时获取的，研究了一半天，在网上也参考了不少朋友的办法，再加上园子里热心的好哥们帮助终于实现了，先看下效果图：
代码如下：
1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>drawing by input text</title> 5 </head> 6 7 <body> 8 <canvas id="myCanvas" width="1000" height="500" > 9 Your browser does not support the HTML5 canvas tag. 10 </canvas> 11 12 <script> 13 14 window.onload = function () { 15 16 var img = new Image(); 17 img.src = ‘./img/demo.jpg‘; 18 img.onload = function () { 19 // 20 var canvas = document.getElementById("myCanvas"); 21 var ctx = canvas.getContext("2d"); 22 // 23 ctx.drawImage(img, 0, 0); 24 25 ctx.font = "80px microsoft yahei"; 26 ctx.fillStyle = "rgba(252,255,255,0.8)"; 27 // 文本框输入的内容添加到图片区域. 28 document.getElementById("btn").onclick = function () { 29 ctx.fillText(document.getElementById("text").value, 100, 200); 30 //document.getElementById("text").valuehttp://www.mamicode.com/= "" //可以选择是否清空输入框内容 31 } 32 } 33 } 34 </script> 35 36 <br> 37 <input type="text" id="text" value="" /> 38 <input type="button" id="btn" value="submit" click="draw" /> 39 40 </body> 41 </html>
html5 canvas+原生javascript 实时获取文本框内容绘制图片水印
@日照明星 QQ: 469135789 转载请注明出处，保留版权信息。
html5 canvas+原生javascript 实时获取文本框内容绘制图片水印
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。