微信小程序实现canvas生成专属海报

项目分销功能需求用户自主生成专属海报

微信小程序使用canvas绘图。话不多说，直接上！

创建画布：

<canvas class="cavans-box" style="width:{{canvasWidth}}rpx; height:{{canvasHeight}}rpx;" canvas-id="myCanvas"/>
<view class="download-btn" bindtap="savePhoto">保存海报</view>

默认参数：

data: {
    canvasWidth:'',
    canvasHeight:'',
    img:app.config.share_poster, // 海报背景的路径
    codeImg:'',
  },

在onload生命周期调用：

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 渲染海报
    this.drawPhoto();
  },

生成海报：

// 绘制图片
  drawPhoto: function () {
    let that = this
   // 提示用户正在合成，否则用户可能有不当操作或者以为手机卡死
    wx.showLoading({
      title: '图片加载中',
    })
		
	  // 从本地存储获取用户信息
      var userInfo = wx.getStorageSync('userInfo')
      // 获取二维码接口
      var url = app.url + app.apiRoute('getWxCode');
      var inviterCode = wx.getStorageSync('inviterCode')
      
      utils.tokenRequest(url, "POST", {
      // 二维码生成访问的路径
          path: '/pages/home/xxx/xxx?inviter_id='+inviter_id,
          width: '280'
        }, '', function(res) {
          if(res.data.code == 200) {
          	// 获取后端返回的二维码图片
            // 需要下载图片，因为画布不能直接绘制网络图片
          var codeImg = res.data.data.img_url
          wx.downloadFile({
            url: that.data.img, // 绘制的第一张图片的下载路径
            success(res) {
             // 创建画布对象
              const ctx = wx.createCanvasContext("myCanvas", that)
             // 获取图片信息，要按照原图来绘制，否则图片会变形
              wx.getImageInfo({
                src: that.data.img,
                success:function(res){
                  // 根据 图片的大小 绘制底图 的大小
                  let imgW = res.width
                  let imgH = res.height
                  let imgPath = res.path
                that.setData({
                  canvasHeight: imgH,
                  canvasWidth:imgW
                })
                  // 绘制第二张图片 二维码
                  ctx.drawImage(imgPath, 0, 0, imgW/2, imgH/2)
                      wx.getImageInfo({
                        src: codeImg, // 二维码的路径
                        success:function(res){
                          // 绘制二维码，左上角距离x轴10，左上角距离y轴400，
                          // 绘制二维码的尺寸
                          ctx.drawImage(res.path, 10,400,res.width/3+20, res.height/3+20)
                          // 绘制海报内其他信息
                          ctx.setFontSize(14)
                          ctx.fillText(userInfo.nickName,135, 455)
                          ctx.draw()
                          wx.hideLoading()
                   },
                  })
                }
              })
            }
          })
        }else{
          wx.hideLoading()
          wx.showLoading({
            title: '生成海报失败',
            success: (res) => {
              setTimeout(() =>{
                wx.reLaunch({
                  url: '/pages/xxx/xxx',
                })
              },2000)
            },
          })
        }
          
    })
      
},

点击保存海报：

// 保存图片
  savePhoto() {
    // 这里用了延时截屏，防止图片没加载完成，截图出现白屏的现象
    setTimeout(() => {
      wx.canvasToTempFilePath({
      // 生成图片参数
        width:'312',
        height:'550',
        fileType:'jpg',
        canvasId: 'myCanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath
          // 保存到相册
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              wx.showModal({
                title: '温馨提示',
                content: '图片保存成功，可在相册中查看',
                showCancel: false
              })
            },
            fail(res) {
              wx.hideLoading()
              wx.showModal({
                title: '温馨提示',
                content: '图片保存失败，请重试',
                showCancel: false
              })
            }
          })
          console.log("生成的图片", tempFilePath)
        },
        fail: function (res) {
          console.log("生成的图片 失败 fail fail fail ",res)
        }
      })
    }, 1500)
  }

希望大家能够用到！