最近有位客戶要求在網頁圖片上加文字水印效果，並且內容是從當前網頁的文本輸入框實時獲取的，研究了一半天，在網上也參考了不少朋友的辦法，再加上園子里熱心的好哥們幫助終於實現了，先看下效果圖：
代碼如下：
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 轉載請注明出處，保留版權信息。