手對手的教你用canvas畫一個簡單的海報
阿新 • • 發佈:2018-12-22
啦啦啦,首先說下需求,產品想讓使用者在我們app內,分享一張圖片到微信、qq等平臺。圖片中包含使用者的姓名、頭像、和帶著自己資訊的二維碼。然後,如何生成這張海報呢~~~
首先我們老大告訴我有一個外掛叫html2canvas、其作用就是可以將dom節點轉化成圖片,是個不錯的東西。我試驗了下、確實可以,但~這個外掛有點大啊,為了滿足海報的這個需求引入這麼大的東西感覺很虧!!!所以,還是自己畫一個~
首先先上效果圖
噹噹噹當~~~最後生成的海報中包括頭像和姓名與二維碼,當然圖上的二維碼是百度的二維碼~最後生成base64用以分享到各大平臺。
廢話不多說,上程式碼(這個程式碼沒有整理,因為懶。。。)
<canvas id="myCanvas" width="750" height="1200" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>
dom節點很簡單,生成個canvas標籤隨意寫點屬性就可以了~
var canvas = document.getElementById("myCanvas"); //獲取canvas節點 function imageToCanvas(canvas,url1,url2,code) { //傳入canvas節點 背景圖url1 頭像url2 二維碼code var ctx = canvas.getContext("2d"); var img1 = new Image(); img1.src = url1; //前面的不解釋了,生成個圖片 img1.onload = function(){ ctx.drawImage(img1,0,0); //當圖片載入完成後 賦到畫布上 從0 0 開始。 var img2 = new Image(); img2.src = url2; img2.onload = function(){ ctx.save(); //儲存當前畫布狀態 ctx.arc(374, 134, 44, 0, 2 * Math.PI); //剪下操作 將正方形的頭像切成圓的 // 從畫布上裁剪出這個圓形 ctx.clip(); //進行裁剪 ctx.drawImage(img2, 330, 90, 88, 88); //放入img2 在330 90座標處 大小 88 ctx.restore(); //釋放畫布狀態 ctx.font="28px Arial"; ctx.textAlign="center"; ctx.fillStyle ='#FFFFFF'; //前面是設定文字 屬性設為居中 ctx.fillText("你叫神馬名字",375,220); //文字 這裡是寫死的 實際中多傳個引數就ok var img3 = new Image(); img3.src = code; img3.onload = function() { ctx.drawImage(img3,136,554,478,478); //同理加影象 var imgCode = convertCanvasToImage(canvas); //將圖片轉為base64 console.log(imgCode.getAttribute('src')) } } } } imageToCanvas(canvas,"1.png",'3.jpeg','code.png'); //初始化 function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); //canvas轉化為img return image; }
這樣就可以得到一個base64了 然後就可以使用啦。