微信小程序 海报生成踩坑记

最近有个需求是要生成分享海报，让用户可以将图片保存到本地然后分享到朋友圈。本来以为是一个很简单的需求，可是万万没想到，微信会这么坑。
刚开始的思路是这样的：

后台根据小程序传过来的参数获取对应的小程序码，然后与背景图合成之后将base64格式的图片传给小程序，这样就可以不用保存图片了。但是经过尝试之后有两个坑

• 坑1：小程序对base64图片支持不友好，模拟器上图片可以显示，真机无法显示
• 坑2：小程序canvas绘图必须使用网络图片或者本地图片，但是如果直接在wx.drawImage传入图片链接，真机上面会显示失败

Google一番之后，算是把这俩坑填上了。在此记录一下，有错误的地方还请大神轻喷。

首先是解决base64图片的问题，既然小程序支持的不好，那我们就保存在服务器好了，下面是Laravel合成图片的简单代码：

public function getPoster(Request $request)
{
    $token = $request->input('token');
    $uid = MembersToken::getUidByToken($token);
    if (file_exists(public_path() . '/poster/' . $uid . '.png')) {
        return response()->json([
            'status' => 'success',
            'data' => '/poster/' . $uid . '.png'
        ]);
    }

    $access_token = Cache::get('access_token');
    if (!$access_token) {
        $appid = config('wechat.appid');
        $secret = config('wechat.secret');
        $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
        $data = curl_request($url);
        $data = json_decode($data,true);

        if (isset($data['errcode']) || empty($data)) {
            throw new ApiException(200,$data['errmsg'],null,[],600001);
        }
        $access_token = $data['access_token'];
        $expires_in = $data['expires_in'];
        Cache::put('access_token',$access_token,120);
    }

    //获取小程序码
    $code_url = 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' . $access_token;
    $post = [
        "page" => "pages/maps/maps",
        "scene" => $uid,
    ];
    $data = curl_request($code_url, $post);
    $data = base64_encode($data);
    $data = Image::make($data)->resize(200, 200);

    //将二维码插入背景图
    $img = Image::make(public_path().'/img/book.png');
    $img->insert($data, 'bottom-right', 0, 0);
    $res = $img->save(public_path() . '/poster/' . $uid . '.png');
    return response()->json([
        'status' => 'success',
        'data' => '/poster/' . $uid . '.png'
    ]);

}

小程序获取到图片路径之后，可以使用canvas绘图的方式显示图片也可以直接使用image标签的形式。为了防止以后可能对图片进行别的处理，我使用了canvas的方式。

此时如果直接使用后台传过来的图片路径的话，就会遇到第二个坑:在真机上面图片是显示不出来的。因此我们需要先使用wx.downloadFile将图片下载下来。嗯，代码差不多就是下面这样：

/***********************************************/
/**调用接口获取图片路径。。。代码太烂省略了。。。**/
/**********************************************/
wx.downloadFile({
  url: app.globalData.domain + res.data.data,
  success: function (res) {
    var path = res.tempFilePath
    var width = _this.data.windowW;
    var height = _this.data.windowH - 50;
    const ctx = wx.createCanvasContext('poster');
    ctx.drawImage(path, 0, 0, width, height);
    ctx.draw(true);
    wx.hideLoading();
  }, 
  fail: function (res) {
    /***/
  }
})

此时，图片应该可以正常的在真机上面显示了。接下来就是下载图片到本地了，解决了上面两个坑之后这块就没什么大问题了，简单贴一下代码：

saveImg: function () {
var _this = this;
var windowW = _this.data.windowW;
var windowH = _this.data.windowH - 50;
wx.canvasToTempFilePath({
  x: 0,
  y: 0,
  width: windowW,
  height: windowH,
  destWidth: windowW,
  destHeight: windowH,
  canvasId: 'poster',
  success: function (res) {
    wx.saveImageToPhotosAlbum({
      filePath: res.tempFilePath,
      success(res) {
        /***/
      },
      fail(res) {
        /***/
      },
      complete(res) {
        /***/
      }
    })
  }
});