【小程序】canvas生成海报图以及一些canvas的小技巧

做项目的时候，经常会遇到类似于将指定页面生成为海报的功能。在移动端或者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))

到这里，最简单的画海报的方法就完成了。