小程序Canvas实用

实现二维码名片 

如图：

小程序页面小程序长按下载后的图片

上代码：

1.weapp.qrcode.js绘制二维码，二维码中间可以放置logo，这个插件可以自己搜索使用更详细

2. wxml页面，css样式自己写，第一个canvas存放二维码，第二个canvas是存放绘制后的，利用小程序提供的wx.canvasToTempFilePath把canvas转变成图片，wx.saveImageToPhotosAlbum下载保存图片
 <canvas
        bindlongpress="bindlongpress"
           bindtap="previewImg"
           canvas-id="mycanvas"
           style="width: 600rpx; height: 600rpx;"
         ></canvas>
        </view>
        <view class="text-gray qc-desc">点击二维码查看，长按保存图片</view>
<canvas canvas-id="canvas" hidden="{{canvasHidden}}" style="width: 600rpx;height: 740rpx;background:#f1f1f1;" />

2.js实现
   drwImage() {
    const that = this
    const cxt = wx.createCanvasContext('canvas')
    const Image = that.data.imagePath //二维码路径

    const doctDetail = that.data.doctor
    const txt = doctDetail.deptName
    const atr = that.data.atarIMG || that.data.avatar //头像路径
    console.log(that.data.avatar)
    cxt.setFillStyle('#fff')  //设置下载后的真个背景是白色
    cxt.fillRect(0, 0, 400, 450)  //画布的长宽

    // cxt.setFillStyle('#FFF')
    if (getApp().globalData.platform === 'android') {//根据不同系统绘制不一样的大小参数，否则下载下来的有空白，或者偏离
      cxt.drawImage(Image, 15, 70, 260, 260)
    } else {
      cxt.drawImage(Image, 15, 70, 300, 300)
    }

    cxt.drawImage(atr, 15, 10, 48, 48)  //设置头像位置，大小
    cxt.setFillStyle('#000')  //设置字体颜色
    cxt.setFontSize(12)  //设置字体大小
    cxt.fillText(doctDetail.doctorName, 70, 25)  //签名说明，比如名字啊，职位
    cxt.fillText(doctDetail.doctorLevelDict, 120, 25) //签名说明，比如名字啊，职位
    cxt.fillText(doctDetail.hospitalName, 70, 45)//签名说明，比如名字啊，职位
    if (txt.length > 8) { //字体过长换位
      cxt.fillText(txt.slice(0, 7), 185, 45)
      cxt.fillText(txt.slice(7, txt.length), 70, 60)
    } else {
      cxt.fillText(txt, 185, 45)
    }

    // cxt.fillText(doctDetail.deptName, 185, 50)
    console.log('1111')
    cxt.stroke()
    cxt.draw(false, function () { //开始绘画到canvas上
      console.log('333')
      wx.canvasToTempFilePath({  小程序自带的下载canvas
        canvasId: 'canvas',
        success: (res) => {
          console.log('222')
          const filePath = res.tempFilePath
          wx.saveImageToPhotosAlbum({  //下载
            filePath,
            success(res) {
              wx.hideLoading({
                success: (res) => {
                  wx.showToast({
                    title: '保存成功',
                    icon: 'none'
                  })
                }
              })
            }
          })
        }
      })
    })
  },