手對手的教你用canvas畫一個簡單的海報

啦啦啦，首先說下需求，產品想讓用戶在咱們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了 而後就能夠使用啦。

來源：http://www.javashuo.com/article/p-fohlrtjo-er.html