做專案的時候，經常會遇到類似於將指定頁面生成為海報的功能。在移動端或者pc端的網頁中，可以用html2canvas 這個js外掛解決。但是在小程式中，就沒有那麼簡單了。
簡單的說，html2canvas 是一個操作dom的外掛，但是小程式中並沒有外掛，所以並不能如此簡單的生成海報。所幸，小程式中有一個 wx.canvasToTempFilePath 這個方法，就能生成一張jpg或者png的圖啦。

首先，要在wxml檔案中寫下列程式碼。

 <view style="width:0;height:0;overflow:hidden">
            <canvas
 
 canvas-id="myCanvas" hidden="{{canvasHidden}}" style="width:{{imgWidth}}px;height:{{imgHeight}}px"></canvas>
  </view>

這個畫圖生成海報的時候，有一個特別煩的地方。那就是我在畫圖的時候，很想隱藏掉canvas，但是我隱藏掉的話呢，它就畫不出來了。這就想當的煩人了。也不知道後來在哪裡看到一個方法，在外面包裹一層view，然後hidden掉就行了。試用了一下好像也沒太大的bug，那就將就著用吧

寫好wxml後，就可以開始畫海報了。一般海報都有一張預設的背景圖，可以直接放在本地。然後：

//首先，宣告canvas
 var ctx = wx.createCanvasContext('myCanvas');
 //在這裡，我說一下。我每次生成的海報圖，都是按照指定的大小生成的圖片。這樣生成的圖片，在每個手機上顯示都都一樣大。實際上我認為這是一個偷懶的辦法。正確辦法應該是計算解析度什麼的。
 ctx.drawImage(imgUrl,0,0,imgUrl.width,imgUrl.height);//畫背景圖
//然後畫頭像或者二維碼等網上鍊接
//1.首先下載圖片。
wx.getImageInfo({
    src: bgImg,
    success: function(res) {
    var
 
 path = res.path;//這是得到檔案的臨時路徑
    //然後將圖片畫在背景圖上
    ctx.draw(path,0,0,100,100);
    }
})
//在後續的生成圖片檔案的操作中，這一步下載圖片是必不可少的，也可以用另一個下載檔案的方法來得到臨時路徑。這裡還要記住把檔案的url繫結在後臺的download那裡面。不繫結是下載不了圖片的。

//畫文字,首先，設定文字的字型，大小，正邪等等
ctx.font = "normal bold 50px 黑體" ;//這個方法，非得寫的話，我建議寫完。第一個值是字型樣式，僅支援 italic, oblique, normal，第二個是粗細，僅支援 normal, bold，第三個是大小，第四個是字型名稱。只能用都支援的字型，實際上也沒幾個字型可用

ctx.fillText("開心", 405, 630);
//這就是畫字型了

//假如現在海報已經畫完了以後，就需要輸出圖片了。就可以用到我上面所說的那個方法。但是，由於小程式的執行順序，建議畫了畫以後，延遲一會兒再生成圖片
ctx.draw(false, setTimeout(function() {
            wx.canvasToTempFilePath({
                canvasId: 'myCanvas',
                destWidth: imgWidth,//螢幕狂傲
                destHeight: imgHeight,
                fileType: "png",//檔案格式，支援png和jpg
                success: function(res) {
                //這就是生成的檔案臨時路徑
                    var tempFilePath = res.tempFilePath;

                },
                fail: function(res) {
                    console.log(res);
                }
            })
        }, 1000))

到這裡，最簡單的畫海報的方法就完成了。