小程序 分享朋友圈当中的坑

无奈现在小程序没有开放分享到朋友圈的功能，只能通过canvas生成海报，保存到手机中分享朋友圈。  说说我遇到的两个坑吧。

 

这是最终实现的效果图。

1

1. 通过drawImage画图片，如果是网络图片，需要先缓存到本地。  我起始是直接用网络图画的，在编辑器里预览是没有问题的。但是用手机预览时会发现图片不显示。 
2. 缓存图片到本地，有两个函数可以用，getImageInfo和downloadFile。 我首先选择的是getImageInfo。 调试的时候发现小程序码可以获取到，用户头像始终获取不到。success，fail，complete里统统不执行。 链接换成小程序码的就可以获取。最后无奈用户头像只能换成downloadFile函数缓存了。 

2

小程序获取到的用户头像是直角的，需要通过arc和clip创建一个圆形的剪切路径然后再绘制头像。这个一开始就走通了。 但是最后把画布保存图片时候发现图片是png透明的，于是在创建画布的时候就把画布填充为白色。  但是填充完发现头像变回直角了。  懵逼了，以为是填充影响到了剪切路径，调试多次发现问题还是存在。

要么把填充色去掉，要么头像只能是直角了。  期间我想到了一个办法，就是保存画布为图片时能不能设置成白色底，通过api发现可以设置图片格式，我设置成了jpg，默认是png的。 保存到电脑上，完美解决，白色的底。 通过手机看，发现背景色是黑色。。

没招了，抱着牺牲头像为直角的想法，把画布填充白色。 手机预览时发现头像是圆角的了，但模拟器上头像还是显示直角。 欲哭无泪。  

不能太相信模拟器啊。  另外我前两天用模拟器时发现不能搜索，于是关了重启。再打开时发现当时正在编辑的js文件全部为空了。为空了.. 500多行的代码呀。  好在的是有个页面和这个类似，复制过来完善了下，但也浪费了不少时间。  从此后就果断git

模拟器效果，手机预览头像是圆角的。

 

放下代码吧，rem函数是我创建的转换px函数。 

    var data = this.data;
    
    var that = this;

    //canvas绘制文字和图片
    const ctx = wx.createCanvasContext('share');
    var imgPath = app.addUrlImg(info.iconUrl);

    // 背景色
    ctx.setFillStyle('white');
    ctx.fillRect(0, 0, app.rem(500), app.rem(600));

    //头像
    wx.downloadFile({
      url:"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKerhicfTMvNOiaibwIWLKzdXEHlVYBHvGiandyGcuCWwnvDeSgaYz8pl3vJCoh8UQa2ZZiaHhQPKRiblzA/132",
      success: res => {
        imgPath = res.tempFilePath;
        ctx.save();
        ctx.beginPath();
        ctx.arc(app.rem(70), app.rem(85), app.rem(40), 0, 2 * Math.PI);
        ctx.clip();
        ctx.drawImage(imgPath, app.rem(30), app.rem(45), app.rem(80), app.rem(80));
        ctx.restore();
        ctx.draw(true);
      }
    })
    
    //昵称
    ctx.setFontSize(app.rem(26));
    ctx.setFillStyle('#2dab94');
    ctx.fillText(info.nickName, app.rem(128), app.rem(80));

    //文字
    ctx.setFontSize(app.rem(26));
    ctx.setFillStyle('#363636');
    ctx.fillText('分享给你一个小程序', app.rem(128), app.rem(115));

    ctx.setFontSize(app.rem(28));
    ctx.setFillStyle('#878787');
    ctx.fillText('长按识别小程序码访问', app.rem(116), app.rem(540))

    // 二维码
    app.request({
      url: app.api._getGRcodeBYb,
      method:"get",
      data: { 
        page:"public/chat/chat/index",
        scene:"id=1234",
        width: "340"
      },
      userId:false,
      success: res => {
        var img = app._root + res.data.qr_code_url;
        // 缓存图片
        wx.getImageInfo({
          src: img,
          success: res => {
            ctx.drawImage(res.path, app.rem(110), app.rem(190), app.rem(260), app.rem(260));
            ctx.draw(true);
          }
        });
        
      }
    })
    
    ctx.draw(true);

wx.showLoading({
      title: '保存中..',
    })
    // 生成图片
    wx.canvasToTempFilePath({
      canvasId: 'share',
      fileType:"jpg",
      quality:1,
      success: function (res) {
        var saveImg = res.tempFilePath
        // 保存图片
        wx.saveImageToPhotosAlbum({
          filePath: saveImg,
          success(res) {
            wx.hideLoading();
            wx.showToast({
              title: '成功保存到相册',
            })
          }
        })

      },
      fail: function (res) {
        wx.showToast({
          title: '生成图片失败',
          icon:"none"
        })
      }
    })