html5 canvas+原生javascript 实时获取文本框内容绘制图片水印
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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").value = "" //可以选择是否清空输入框内容 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 实时获取文本框内容绘制图片水印的主要内容，如果未能解决你的问题，请参考以下文章
[译]知名Html5 Canvas Javascript库对比
用html5的canvas和JavaScript创建一个绘图程序