首頁 > 開發者 > JavaScript
標籤：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 即時擷取文字框內容繪製圖片浮水印
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
