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

BlackHole1 發布于2019-08-02 12:13 / 1227人閱讀

摘要：啦啦啦，首先說下需求，產品想讓用戶在我們內，分享一張圖片到微信等平臺。圖片中包含用戶的姓名頭像和帶著自己信息的二維碼。然后，如何生成這張海報呢首先我們老大告訴我有一個插件叫其作用就是可以將節點轉化成圖片，是個不錯的東西。

啦啦啦，首先說下需求，產品想讓用戶在我們app內，分享一張圖片到微信、qq等平臺。圖片中包含用戶的姓名、頭像、和帶著自己信息的二維碼。然后，如何生成這張海報呢~~~
首先我們老大告訴我有一個插件叫html2canvas、其作用就是可以將dom節點轉化成圖片，是個不錯的東西。我試驗了下、確實可以，但~這個插件有點大啊，為了滿足海報的這個需求引入這么大的東西感覺很虧！！！所以，還是自己畫一個~
首先先上效果圖

當當當當~~~最后生成的海報中包括頭像和姓名與二維碼，當然圖上的二維碼是百度的二維碼~最后生成base64用以分享到各大平臺。
廢話不多說，上代碼（這個代碼沒有整理，因為懶。。。）

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了然后就可以使用啦。

GPU云服務器云服務器教你用阿里云開我的世界服務器 html畫一個手教你用一個教你開發小程序的小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53420.html

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

摘要：啦啦啦，首先說下需求，產品想讓用戶在我們內，分享一張圖片到微信等平臺。圖片中包含用戶的姓名頭像和帶著自己信息的二維碼。然后，如何生成這張海報呢首先我們老大告訴我有一個插件叫其作用就是可以將節點轉化成圖片，是個不錯的東西。啦啦啦，首先說下需求，產品想讓用戶在我們app內，分享一張圖片到微信、qq等平臺。圖片中包含用戶的姓名、頭像、和帶著自己信息的二維碼。然后，如何生成這張海報呢~~~首...

verano 2019-08-23 13:57 評論0 收藏0
手對手的教你用canvas畫一個簡單的海報

摘要：啦啦啦，首先說下需求，產品想讓用戶在我們內，分享一張圖片到微信等平臺。圖片中包含用戶的姓名頭像和帶著自己信息的二維碼。然后，如何生成這張海報呢首先我們老大告訴我有一個插件叫其作用就是可以將節點轉化成圖片，是個不錯的東西。啦啦啦，首先說下需求，產品想讓用戶在我們app內，分享一張圖片到微信、qq等平臺。圖片中包含用戶的姓名、頭像、和帶著自己信息的二維碼。然后，如何生成這張海報呢~~~首...

cyixlq 2019-08-30 15:54 評論0 收藏0
撩妹技能 get，教你用 canvas 畫一場流星雨

摘要：現在就一起來做一場流星雨，用程序員的野路子浪漫一下。要畫一場流星雨，首先，自然我們要會畫一顆流星。畫一顆流星是的，的卻是沒這個，但是不代表我們畫不出來。而我們每一幀要保留的就是，上一幀透明度的流星，覆蓋畫布黑色矩形我們不能顯示。開始妹子都喜歡流星，如果她說不喜歡，那她一定是一個假妹子。現在就一起來做一場流星雨，用程序員的野路子浪漫一下。要畫一場流星雨，首先，自然我們要會畫一顆流...

cc17 2019-08-21 11:37 評論0 收藏0
Canvas繪圖在微信小程序中的應用:生成個性化海報

摘要：解析進到首頁其實關鍵字在本地就隨機取完了，在首頁中的方法中就通過緩存了要畫的元素，比如關鍵字這里是圖片關鍵字解析語也是圖片畢竟微信小程序的不支持字體等等。一、Canvas應用的背景(個人理解)及基礎語法背景從2012年開始，微信那個時候用戶的積累的量已經非常大了，推出公眾號，當然大屏智能手機在那個時候也流行，傳統的大眾媒體逐步消亡，像微信公眾號這樣的新媒體盛行。企業的廣告投入開始...

vpants 2019-08-23 12:11 評論0 收藏0