wepy，微信小程序使用canvas绘制海报

<template>
  <view>
    <view class="poster">
      <view class="tip">保存{{from==='location'?'楼盘图片':'名片'}}到相册，分享给朋友吧～</view>
      <view class="closeBox">
        <image bindtap="closefn"
               class="closeImg"
               src="../../assets/images/sjy/close.png"
               alt="" />
      </view>
      
      <view class="containerc"
            id="container">
        <view wx:if="{{showloading}}"
              class="loadingwrap">
          <image class="loadimg"
                 src="/static/images/loading.gif"
                 mode="scaleToFill" />
          <text class="loadtxt">正在生成图片，请稍等～</text>
        </view>
        <canvas canvas-id="canvas"
                style="width:100%;height:100%;" />
      </view>
      <view class="savebtn"
            bindtap="saveShareImg">保存图片</view>
    </view>
  </view>
</template>

<script>
import wepy from '@wepy/core'

wepy.component({
  properties: {
    from: {
      type: String,
      value: ''
    },
    cardInfo: {
      type: String,
      value: ''
    },
    projectInfo: {
      type: String,
      value: ''
    },
    projectId: {
      type: String,
      value: ''
    }
  },
  data: {
    showloading: true
    // saveSuccess: false
  },
  methods: {
    closefn () {
      this.$emit('isPoster', false)
    },
    getCard (proUrl, rpx, cardInfo, projectInfo) {
      let that = this
      const context = wx.createCanvasContext('canvas', that.$wx)
      // #293447
      context.beginPath()
      context.setFillStyle('#293447')
      // 382 是canvas设置得宽(跟随父元素得宽先写死)
      context.fillRect(0, 0, 382 * rpx, 680 * rpx)
      context.drawImage(proUrl, 0, 0, 382 * rpx, 230 * rpx)
      // 绘制楼房信息 文字便宜有问题在Y坐标上
      context.setFontSize(26 * rpx)
      context.setFillStyle('#FFFFFF')
      context.setTextAlign('left')
      context.fillText(projectInfo.projectName, 20 * rpx, 270 * rpx)
      context.setFontSize(28 * rpx)
      context.setFillStyle('#E1586D')
      context.setTextAlign('left')
      context.font = 'bold'
      if (projectInfo.price) {
        context.fillText(`${projectInfo.price}元起/㎡`, 20 * rpx, 310 * rpx)
      } else {
        context.fillText(`待定`, 20 * rpx, 310 * rpx)
      }
      context.setFontSize(15 * rpx)
      context.setFillStyle('#B0B8C2')
      context.setTextAlign('left')
      context.fillText('建筑面积', 20 * rpx, 355 * rpx)
      context.fillText('在售户型', 151 * rpx, 355 * rpx)
      context.fillText('物业类型', 261 * rpx, 355 * rpx)
      context.setFontSize(16 * rpx)
      context.setFillStyle('#ffffff')
      context.setTextAlign('left')
      context.fillText(projectInfo.area, 20 * rpx, 385 * rpx)
      context.fillText(projectInfo.shi, 151 * rpx, 385 * rpx)
      if (projectInfo.projectType.length > 7) {
        // 第一段只展示7个
        let t1 = projectInfo.projectType.substring(0, 7)
        let t2 = projectInfo.projectType.substr(7)
        context.fillText(t1, 261 * rpx, 385 * rpx)
        context.fillText(t2, 261 * rpx, 405 * rpx)
      } else {
        context.fillText(projectInfo.projectType, 261 * rpx, 385 * rpx)
      }

      // 姓名微信电话
      context.fillText(cardInfo.userName, 155 * rpx, (cardInfo.wxNo ? 436 : 451) * rpx)
      context.setFontSize(16 * rpx)
      context.setFillStyle('#A1AAB4')
      context.fillText('电话：' + (cardInfo.phone || '暂无填写手机号'), 155 * rpx, (cardInfo.wxNo ? 466 : 481) * rpx)
      if (cardInfo.wxNo) {
        context.fillText('微信：'+cardInfo.wxNo, 155 * rpx, 496 * rpx)
      }
      // 长按识别
      context.setFontSize(15 * rpx)
      context.setFillStyle('#B0B8C2')

      const txt1 = context.measureText('长按识别小程序查看更多优质楼盘详情')
      context.fillText('长按识别小程序查看更多优质楼盘详情', (382 * rpx - txt1.width * rpx) / 4, 655 * rpx)
      // 姓名微信电话图片
      context.drawImage(
        '../../assets/images/sjy/canPerson.png',
        125 * rpx,
        (cardInfo.wxNo ? 422 : 437) * rpx,
        20 * rpx,
        20 * rpx
      )
      context.drawImage(
        '../../assets/images/sjy/canPhone.png',
        125 * rpx,
        (cardInfo.wxNo ? 452 : 467) * rpx,
        20 * rpx,
        20 * rpx
      )
      if (cardInfo.wxNo) {
        context.drawImage(
          '../../assets/images/sjy/canWei.png',
          125 * rpx,
          482 * rpx,
          20 * rpx,
          20 * rpx
        )
      }

      // 竖线
      context.moveTo(130 * rpx, 345 * rpx)
      context.lineTo(130 * rpx, 395 * rpx)
      context.moveTo(238 * rpx, 345 * rpx)
      context.lineTo(238 * rpx, 395 * rpx)
      // 横线
      context.moveTo(0 * rpx, 515 * rpx)
      context.lineTo(382 * rpx, 515 * rpx)
      context.setStrokeStyle('#384358')
      context.setLineWidth(1 * rpx)
      context.stroke()
      // 网络图下载到本地
      wx.downloadFile({
        url: 'https://' + cardInfo.qrCodeUrl,
        success: res1 => {
          if (res1.statusCode === 200) {
            // 二维码得白色矩形
            context.rect(146 * rpx, 535 * rpx, 90 * rpx, 90 * rpx)
            context.setFillStyle('#ffffff')
            context.fill()
            // 二维码
            context.drawImage(res1.tempFilePath, 146 * rpx, 535 * rpx, 90 * rpx, 90 * rpx)
            // 头像
            wx.downloadFile({
              url: cardInfo.picUrl || 'https://brchouseproperty-pic.oss-cn-shanghai.aliyuncs.com/activity69528903698624575555040427973551593334654851.png',
              success: res2 => {
                // 圆
                // 不加beginPath圆就变了
                context.save()
                context.beginPath()
                context.arc(60 * rpx, 460 * rpx, 40 * rpx, 0, 2 * Math.PI)
                context.clip()
                context.drawImage(res2.tempFilePath, 20 * rpx, 420 * rpx, 80 * rpx, 80 * rpx)
                context.restore()
                context.draw(false, setTimeout(res => {
                  wx.canvasToTempFilePath({
                    canvasId: 'canvas',
                    width: 382 * rpx,
                    height: 680 * rpx,
                    destWidth: 382 * rpx * 6,
                    destHeight: 680 * rpx * 6,
                    success: function (res) {
                      that.showloading = false
                      that.targetImg = res.tempFilePath
                    },
                    fail: function (res) {
                    }
                  }, that.$wx)
                }, 300))
              }
            })
          }
        },
        fail: res => {

        }
      })
    },
    saveShareImg () {
      if (this.showloading) {
        return wx.showToast({
          icon: 'none',
          title: '正在生成图片，请稍后进行保存'
        })
      }
      wx.saveImageToPhotosAlbum({
        filePath: this.targetImg,
        success: res => {
          wx.showToast({
            icon: 'none',
            title: '图片保存成功，快到手机相册进行分享吧'
          })
          // 关闭poster
          // this.closefn()
        },
        fail: res => {
          wx.showToast({
            // title: res.errMsg,
            title: '拒绝权限无法保存，请在小程序列表移除重新进入授权',
            icon: 'none',
            duration: 2000
          })
        }
      })
    }
  },
  ready () {
    const that = this
    wx.getSystemInfo({
      success: res => {
        that.pixelRatio = res.pixelRatio
        const rpx = res.windowWidth / 750
        const cardInfo = JSON.parse(that.cardInfo)
        const projectInfo = JSON.parse(that.projectInfo)
        wx.downloadFile({
          url: projectInfo.picUrl,
          success: res => {
            if (res.statusCode === 200) {
              that.getCard(res.tempFilePath, rpx, cardInfo, projectInfo)
            }
          }
        })
      }
    })
  }
})
</script>

<style lang="less" scoped>
.poster {
  width: 100%;
  height: 978rpx;
  background: #fff;
  border-radius: 26rpx 26rpx 0 0;
  position: relative;
  overflow: hidden;
  padding-top: 20rpx;
  padding-bottom: 35rpx;

  .tip {
    margin-left: 28rpx;
    margin-bottom: 40rpx;
    color: #515152;
    font-size: 32rpx;
    font-weight: 500;
  }
  .closeBox {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    width: 40rpx;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .closeImg {
    width: 24rpx;
    height: 22rpx;
  }
}
.containerc {
  position: relative;
  width: 382rpx;
  height: 680rpx;
  background: #ecf0f4;
  margin: 24rpx auto 46rpx;
  display: block;
  .loadingwrap {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #293447;
    .loadimg {
      width: 78rpx;
      height: 78rpx;
    }
    .loadtxt {
      margin-top: 50rpx;
      color: #b0b8c2;
      font-size: 28rpx;
      font-weight: 500;
    }
  }
}
.savebtn {
  width: 445rpx;
  height: 78rpx;
  border-radius: 39rpx;
  margin: 0 auto;
  color: #fff;
  font-size: 34rpx;
  text-align: center;
  line-height: 78rpx;
  background: linear-gradient(
    90deg,
    rgba(99, 113, 240, 1) 0%,
    rgba(126, 160, 252, 1) 100%
  );
}
.hassave {
  position: fixed;
  width: 642rpx;
  height: 387rpx;
  background: #fff;
  border-radius: 26rpx;
  top: 300rpx;
  left: 50%;
  margin-left: -321rpx;
  overflow: hidden;
  .line {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx !important;
    color: #3e495a;
    font-weight: 500;
  }
  .line1 {
    height: 48rpx;
    margin-top: 31rpx;
  }
  .line2 {
    height: 196rpx;
    .txt {
      text-align: center;
      font-size: 32rpx !important;
    }
  }
  .line3 {
    height: 112rpx;
    border-top: 1rpx solid rgba(214, 214, 222, 0.3);
    color: #657af8;
    font-size: 34rpx;
  }
}
</style>