• 目的：

不使用组件，生成海报图片。

• 效果：

• 代码如下：

wxml：

<view style="width:100%;height:{{canvasHeight}}px;">
    <canvas wx:if="{{!showImg}}" type="2d" id="myCanvas" style="width:100%;height:100%;"></canvas>
    <image wx:else src="{{imgSrc}}" style="width: 100%;height: 100%;" show-menu-by-longpress="true"></image>
</view>

js：

data: {
    name: "Sun",
    sign: "靡不有初，鲜克有终。",
    posterUrl: "", // 海报地址
    photoUrl: "", // 头像地址
    qrcodeUrl: "", // 二维码
    photoDiam: 50, // 头像直径
    qrcodeDiam: 80, // 小程序码直径
    infoSpace: 13, // 底部信息的间距
    bottomInfoHeight: 100, // 底部信息区高度
    tips: "长按或扫码了解更多", // 提示语
    canvasWidth: 0, // 画布宽
    canvasHeight: 0, // 画布高
    canvasDom: null, // 画布dom对象
    canvas: null, // 画布的节点
    ctx: null, // 画布的上下文
    dpr: 1, // 设备的像素比
    posterHeight: 0, // 海报高
    imgSrc:'',
    showImg: false,
},

其实也就是看文档，踩了一些坑，也看了社区的一些问答，但总的来说官方文档可以满足使用。

主要使用方法如下

ctx.drawImage(pic, 0, 0, res.width, res.height) // 绘制大图，头像和二维码 到 canvas

ctx.fillText(this.data.name, 0, 0)  // 绘制文字

ctx.fillRect(0, this.data.canvasHeight - this.data.bottomInfoHeight, this.data.canvasWidth, this.data.bottomInfoHeight) // 底部白色背景

// 把canvas 绘制成 图片
wx.canvasToTempFilePath({
  canvas: that.data.canvas,
  fileType: 'jpg',
  success: function (res) {
  console.log(res.tempFilePath)
  that.setData({
   imgSrc:res.tempFilePath,
   showImg:true,
    })
  }
})

• 拓展阅读：

painter组件生成海报

完。