小程序导出朋友圈海报详细步骤

前言

小程序导出朋友圈海报的方式主要有两种：用微信 api 手动保存，用 painter。

用微信 api 手动保存的话，大致是使用 canvas 绘制出海报，然后下载。

所以，我们重点是如何绘制出海报，下载的流程都是一样的。

当然在保存图片到相册前，还会需要获取保存图片到相册的权限。

步骤

1. 创建canvas画布

<canvas id="canvas" width="500px" height="500px"></canvas>

2. 获取canvas画布上下文

var ctx = canvas.getContext('2d');

3. 绘制海报背景

ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 500, 500);

4. 绘制海报标题

ctx.fillStyle = '#000';
ctx.font = 'bold 20px Arial';
ctx.fillText('小程序导出朋友圈海报', 100, 100);

5. 绘制海报图片

var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 100, 150, 300, 200);
};
img.src = '海报图片路径';

6. 绘制海报二维码

var qrcode = new QRCode('canvas');
qrcode.makeCode('二维码内容');

7. 保存海报图片

canvas.toDataURL('image/png', 1.0).then(function(base64) {
  wx.saveImageToPhotosAlbum({
    filePath: base64,
    success: function() {
      console.log('海报保存成功');
    },
    fail: function() {
      console.log('海报保存失败');
    }
  });
});

8. 获取保存图片到相册的权限

wx.getSetting({
  success: function(res) {
    if (!res.authSetting['scope.writePhotosAlbum']) {
      wx.authorize({
        scope: 'scope.writePhotosAlbum',
        success: function() {
          // 用户已经同意保存图片到相册的权限
        },
        fail: function() {
          // 用户拒绝了保存图片到相册的权限
        }
      });
    }
  }
});

总结

上面就是小程序导出朋友圈海报的详细步骤，希望能对大家有所帮助。