地元の生成にキャンバスポスターを達成するために、小さなマイクロチャネルプログラムの保存

<view>
    <canvas class="canvas" style="width: {{canvas_width}}px;height:{{canvas_height}}px;" canvas-id="mycanvas"></canvas>
    <view class="pop">
        <view class="popbg" bindtap="getclose"></view>
        <view class="popup">
            <view class="poster">
                <image src="{{canvas}}"></image>
            </view>
            <view class="save">
                <view class="down">
                    <image mode="widthFix" src="https://sucai.suoluomei.cn/sucai_zs/images/20200110105821-1.png">
                    </image>
                </view>
                <view bindtap="getsave">保存图片</view>
            </view>
        </view>
    </view>
</view>

.popbg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.popup {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%);
    z-index: 100;
}

.poster {
    width: 650rpx;
    height: 900rpx;
    background: #fff;
    border-radius: 30rpx;
    overflow: hidden;
}

.save {
    margin: 40rpx auto 0;
    width: 340rpx;
    height: 70rpx;
    background: #0C6D4A;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.down {
    width: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.save view:nth-child(2) {
    color: #fff;
    font-size: 28rpx;
    margin-left: 20rpx;
}

.canvas {
    position: absolute;
    top: -9999rpx;
    left: 0;
    width: 650rpx;
    height: 800rpx;
}

image {
    width: 100%;
    height: 100%;

}

Page({
  data: {
    canvas: '',
    canvas_width: 650,
    canvas_height: 900,
    main: "https://sucai.suoluomei.cn/sucai_zs/images/20191209160052-2.png",
    logo: "https://sucai.suoluomei.cn/sucai_zs/images/20190919150508-logo.png",
    explain: "宝宝生病老不好，打一针就好了",
    code: "https://sucai.suoluomei.cn/sucai_zs/images/20191123112141-2.png"
  },

  onLoad: function (options) {
    var logo = this.data.logo
    var main = this.data.main
    var explain = this.data.explain
    var code = this.data.code
    this.getcanvas(logo, main, explain, code)
  },
  // 获取海报 画布设置宽650 高800 
  // 以此传入图标，主体图片，标题文字，小程序二维码
  getcanvas(logo, main, explain, code) {
    wx.showLoading({
      title: '加载中',
    })
    // 主图所需
    let primary = ""
    let primary_width = ""
    let primary_height = ""
    // logo所需
    let mark = ""
    let mark_width = ""
    let mark_height = ""
    // 小程序码所需
    let yard = ""
    let yard_width = ""
    let yard_height = ""
    // 海报主要图
    wx.getImageInfo({
      src: main,
      success: (res) => {
        primary = res.path
        primary_width = res.width
        primary_height = res.height
      },
    })
    // 海报水印logo
    wx.getImageInfo({
      src: logo,
      success: (res) => {
        mark = res.path
        mark_width = res.width
        mark_height = res.height
        console.log(mark_height)
      },
    })
    // 小程序码
    wx.getImageInfo({
      src: code,
      success: (res) => {
        yard = res.path
        yard_width = res.width
        yard_height = res.height
      },
    })
    setTimeout(() => {
      let ctx = wx.createCanvasContext('mycanvas')
      // 填充背景颜色
      ctx.rect(0, 0, this.data.canvas_width, this.data.canvas_height)
      ctx.setFillStyle('#fff')
      ctx.fill()
      // logo图片
      ctx.drawImage(mark, 30, 30, mark_width, mark_height)
      // 竖线
      ctx.moveTo(mark_width + 40, 30)
      ctx.lineTo(mark_width + 40, mark_height + 30)
      ctx.stroke()
      // 美肤小程序
      ctx.setFontSize(28)
      ctx.setFillStyle('#000')
      ctx.fillText('美肤小程序', mark_width + 50, mark_width / 2 + 15)
      // 主体图片
      ctx.drawImage(primary, this.data.canvas_width / 2 - primary_width / 2.4, 140, primary_width / 1.2, primary_height / 1.2)
      // 详情
      ctx.setFontSize(24)
      ctx.setTextAlign('center')
      ctx.setFillStyle('#666')
      ctx.fillText(explain, 325, 500)
      ctx.fillText('你的好友给你推荐了一节课程，块来了解一下吧', 325, 550)
      // 小程序二维码
      ctx.drawImage(yard, this.data.canvas_width / 2 - yard_width / 2.4, 600, yard_width / 1.2, yard_height / 1.2)
      ctx.draw(true, () => {
        wx.canvasToTempFilePath({
          canvasId: 'mycanvas',
          success: (res) => {
            wx.hideLoading()
            console.log(res.tempFilePath)
            this.setData({
              canvas: res.tempFilePath
            })
          },
        })
      })
    }, 1000)
  },
  // 保存为图片
  getsave() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.canvas,
      success(res) {
        console.log(res)
      }
    })
  }
})