小程序 下载、分享 convas生成的二维码

css就不放了，drawQrcode 是url绘制convas的方法，百度上有好多就不放出来了。
其实wx官方分享图片的方法上，就自带一个下载功能————尴尬

// pages/successAppointment/index.js
import drawQrcode from '../../utils/qrCode'
import {
  scheduleDetail
} from '../../api/com'
const App = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navHeight: App.globalData.statusBarHeight,
    navTop: App.globalData.navTop,
    params: {},
    info: {},
    result: {},
    breakImage: '',
    showtop: true,
    id: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (options.showtop) {
      this.setData({
        showtop: false,
        id: options.id
      })
    } else {
      this.setData({
        showtop: true,
        id: ''
      })
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (this.data.showtop) {
      this.setData({
        params: wx.getStorageSync('request')
      })
      this.convasFun()
    } else {
      wx.showLoading({
        title: '加载中',
      })
      scheduleDetail(this.data.id).then((res) => {
        if (res.code !== 200) return
        this.setData({
          params: res.result
        })
        this.convasFun()
      }).finally(() => {
        wx.hideLoading()
      })
    }

  },
  convasFun() {
    let that = this
    var query = wx.createSelectorQuery() //创建节点查询器 query
    query.select('#canvas').boundingClientRect() //这段代码的意思是选择Id=the-id的节点，获取节点位置信息的查询请求
    query.selectViewport().scrollOffset() //这段代码的意思是获取页面滑动位置的查询请求
    query.exec(function (res) {
      drawQrcode({
        width: res[0].width,
        height: res[0].height,
        canvasId: 'myQrcode',
        text: that.data.params.qrCodeUrl,
        image: {
          imageResource: '../../images/icon.png',
          dx: (res[0].width /2 - 30),
          dy: (res[0].height /2 - 30),
          dWidth: 60,
          dHeight: 60
        }
      })
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '预约码'
        })
      }, 1000)
    })
    return {
      title: '预约码',
      path: '/page/successAppointment/index?id=123',
      promise
    }
  },
  btnList() {
    wx.showLoading({
      title: '保存中',
    })
    let that = this
    var query = wx.createSelectorQuery() //创建节点查询器 query
    query.select('#canvas').boundingClientRect() //这段代码的意思是选择Id=the-id的节点，获取节点位置信息的查询请求
    query.selectViewport().scrollOffset() //这段代码的意思是获取页面滑动位置的查询请求
    query.exec(function (res) {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: res[0].width,
        height: res[0].height,
        destWidth: res[0].width,
        destHeight: res[0].height,
        canvasId: 'myQrcode',
        success(res) {
          wx.showShareImageMenu({
            path: res.tempFilePath,
            success(res) {
              console.log(res, 'res')
            },
            fail(err) {
              console.log(err, 'err')
            },
            complete() {
              wx.hideLoading()
            }
          })
        }
      })
    })
  },
  imgDown() {
    wx.showLoading({
      title: '保存中',
    })
    let that = this
    var query = wx.createSelectorQuery() //创建节点查询器 query
    query.select('#canvas').boundingClientRect() //这段代码的意思是选择Id=the-id的节点，获取节点位置信息的查询请求
    query.selectViewport().scrollOffset() //这段代码的意思是获取页面滑动位置的查询请求
    query.exec(function (res) {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: res[0].width,
        height: res[0].height,
        destWidth: res[0].width,
        destHeight: res[0].height,
        canvasId: 'myQrcode',
        success(res) {
          that.setData({
            breakImage: res.tempFilePath
          })
          wx.saveFile({
            tempFilePath: res.tempFilePath,
            success(resFile) {
              const savedFilePath = resFile.savedFilePath
              wx.saveImageToPhotosAlbum({ //保存到本地
                filePath: savedFilePath,
                success(res1) {
                  wx.showToast({
                    title: '保存成功',
                    icon: 'success',
                    duration: 2000
                  })
                },
                fail: function (err) {
                  if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                    wx.openSetting({
                      success(settingdata) {
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          wx.showModal({
                            title: '提示',
                            content: '再次点击保存二维码保存到相册',
                            showCancel: false,
                            success(res) {
                              if (res.confirm) {
                                console.log('用户点击确定')
                              } else if (res.cancel) {
                                console.log('用户点击取消')
                              }
                            }
                          })
                        } else {
                          wx.showModal({
                            title: '提示',
                            content: '无授权无法保存至相册',
                            showCancel: false,
                            success(res) {
                              if (res.confirm) {
                                console.log('用户点击确定')
                              } else if (res.cancel) {
                                console.log('用户点击取消')
                              }
                            }
                          })
                        }
                      }
                    })
                  }
                },
              })
            }
          })
        },
        complete() {
          wx.hideLoading()
        }
      })
    })
  }
})

<topBar title="{{showtop?'预约成功': '二维码详情'}}" back="{{true}}" routePath="{{id?'':'/pages/index/index'}}" />
<view class="successAppointment_box" style="padding-top: calc({{navTop+navHeight+5}}px + 26rpx) !important">
  <view class="successAppointment">
  <block >
    <image class="successAppointment_icon" src="../../images/qrSuccess.png"></image>
    <view class="successAppointment_textTop">
      <view class="successAppointment_textTop_bold">恭喜您，预约成功！</view>
      <view>档期已为您锁定{{(params.studio.lockTime || 0) * 60}}分钟，请使用微信扫码支付</view>
    </view>
  </block>
    <view class="successAppointment_textBto">
      {{params.reserveNo}}
    </view>
    <!-- <canvas class="qrCode" canvas-id="myQrcode"></canvas> -->
    <canvas id="canvas" class="qrCode" style="width: 480rpx; height: 480rpx;" canvas-id="myQrcode"></canvas>
    <!-- <image  src="{{params.qrCodeUrl}}" alt="" /> -->
    <view class="successAppointment_btnList">
      <button class="successAppointment_btnList_button" bindtap="imgDown">保存二维码</button>
      <button class="successAppointment_btnList_button" bindtap="btnList">分享好友</button>
    </view>
  </view>
</view>