H5網頁Canvas畫布繪圖 圖片文字合成
阿新 • • 發佈：2019-02-13
一個很簡單的小列子，直接貼程式碼，程式碼中都有註釋，下面有demo連結。
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <script src="js/jquery.js"></script> </head> <body> <!--需要合成圖片，因為沒法直接讀取本地圖片，所以將圖片放在這裡並隱藏--> <div style="display:none"> <img id="starImg" style="height:100%; width:100%;" src="img/invitation.png" /> </div> <!--畫布--> <canvas id="main" height="730" width="420" style="border:1px solid #d3d3d3;"></canvas> <!--輸入框，失去焦點後自動執行hechen()--> <input type="text" id="desc" onblur="hechen()" value="" /> <!--saveImageInfo()生成照片並顯示到另個網頁--> <button onclick="saveImageInfo()">確認生成</button> <script> //預載入將圖片繪製到畫布 $(function(){ hechen(); }); function hechen(){ //獲取時間2012-12-12 var mydate = new Date(); var date = mydate.getFullYear()+'-'+(mydate.getMonth()+1)+'-'+mydate.getDate(); //獲取畫布物件 var mainCtx = getCanvasContext('main'); var maxWidth = mainCtx.width; var maxHeight = mainCtx.height; mainCtx.clearRect(0,0,1000,1000); //獲取圖片的實際路徑 var starImg = new Image(); starImg.src=$('#starImg').attr('src'); //合成 starImg.onload=function(){ //先把圖片繪製在這裡 mainCtx.drawImage(starImg,0,0,420,730); //讀取使用者的文字 if($('#desc').val()){ //設定使用者文字的大小字型等屬性 mainCtx.font = "small-caps bold 18px STXinwei"; //設定使用者文字填充顏色 mainCtx.fillStyle = "black"; //繪製文字 mainCtx.fillText($('#desc').val(),108,335); //設定時間文字的大小字型屬性 mainCtx.font = "small-caps bold 16px STXinwei"; //繪製時間 mainCtx.fillText(date,326,447); } }; } //通過id獲取canvas物件 function getCanvasContext(id){ return document.getElementById(id).getContext("2d"); } //將畫布生成圖片 function saveImageInfo() { var mycanvas = document.getElementById("main"); var image = mycanvas.toDataURL("image/jpg"); var w=window.open('about:blank','image from canvas'); w.document.write("<img src='"+image+"' alt='from canvas'/>"); } //下載圖片 function saveAsLocalImage(){ var myCanvas = document.getElementById("main"); var image = myCanvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream"); window.location.href=image; } </script> </body> </html>