码迷,mamicode.com
首页 > 编程语言 > 详细

html5 canvas+原生javascript 实时获取文本框内容绘制图片水印

时间:2016-10-26 09:28:55      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:microsoft   绘制图片   har   网上   技术分享   submit   script   ros   text   

最近有位客户要求在网页图片上加文字水印效果,并且内容是从当前网页的文本输入框实时获取的,研究了一半天,在网上也参考了不少朋友的办法,再加上园子里热心的好哥们帮助终于实现了,先看下效果图:

技术分享

代码如下:

 

 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 实时获取文本框内容绘制图片水印

标签:microsoft   绘制图片   har   网上   技术分享   submit   script   ros   text   

原文地址:http://www.cnblogs.com/rzjn/p/5999019.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!