啦啦啦，先說下需求，產品想讓使用者在我們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了然後就可以使用啦。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。