微信小程序里在canvas里使用base64的图片

wxml 文件：

<!-- <view class="admin-qrcode">
  <image src="{{adminQrcode}}" />

</view>
<view class="admin-info">
  <view class="admin-info-no">
    账号：10086
  </view>
  <view class="admin-info-pwd">
    密码：10086
  </view>
</view> -->
<view wx:if="is_hide_canvas">
  <canvas style=" 320px; height: 400px; left:{{(screenWidth-320)/2}}px;top:20px;" canvas-id="myCanvas"></canvas>
</view>

<!-- <button bindtap="survived">生成</button> -->


<view class="oper-btn">
  <view class="oper-save" bindtap="saveToLoacl">
    <view>
      <text class="iconfont icon-download oper-icon-save"></text>
    </view>
    <view>
      保存
    </view>
  </view>
  <view class="oper-share" bindtap="toShare">
    <button open-type="share" class="share-btn">
      <view>
        <text class="iconfont icon-weixin oper-icon-share"></text>
      </view>
      <view>
        微信好友
      </view>
    </button>
  </view>
</view>

<!-- <button bindtap="saveToLoacl">保存</button> -->

js 文件：

const app = getApp();
const http = require('../../../utils/http.js');
const api = require('../../../config.js');
const utils = require('../../../utils/util.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    adminQrcode: '',
    codeImg: '../../../image/shang.png',
    is_hide_canvas: false,
    tempFilePath: '',
    basepath: '',
    screenWidth: app.globalData.screenWidth

  },


  getAdminQrcode: function() {
    let _this = this;
    let postData = {
      'scene': '10086',
      'page': 'pages/index/index',
      'is_hyaline': '0'
    };

    wx.showLoading({
      title: '数据请求中...',
      mask: true
    })

    http.httpPost(api.CreateQrcode, postData, (res) => {
      console.log(res);
      wx.hideLoading();
      if (!res) {
        return;
      }

      if (res.success) {
        let _result = res.result;
        if (_result.success) {


          this.setData({
            adminQrcode: 'data:image/png;base64,' + _result.data
          });
          this.survived();


        } else {
          utils.showToastMessage(_result);
        }
      } else {
        utils.showToastMessage(res);
      }

    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    if (options.admin_no && options.admin_pwd) {
      this.setData({
        admin_no: options.admin_no,
        admin_pwd: options.admin_pwd
      });
      this.getAdminQrcode();
    } else {
      wx.showModal({
        title: '提示',
        content: '参数异常',
        showCancel: false,
        success: res => {
          wx.navigateBack({

          })
        }
      })
    }


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

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

  },

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

  },

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

  },

  saveToLoacl: function() {
    let _this = this;
    const fsm = wx.getFileSystemManager();
    wx.saveImageToPhotosAlbum({
      filePath: _this.data.tempFilePath,
      success(res) {
        fsm.readdir({ // 读取目录内文件列表
          dirPath: _this.data.basepath,
          success(res) {
            res.files.forEach((val) => { // 遍历文件列表里的数据
              console.log(val)
              fsm.unlink({ // 清除writeFile保存的图片
                filePath: _this.data.basepath + '/' + val
              });
            })
          },
          fail(err) {
            console.log(err)
            wx.showModal({
              title: '异常',
              content: JSON.stringify(err),
              showCancel: false
            })
          }
        })
        // wx.getSavedFileList({
        //   success: savedFileInfo => {
        //     let list = savedFileInfo.fileList
        //     console.log("list:", savedFileInfo.fileList)
        //     for (let i = 0; i < list.length; i++) {
        //       wx.removeSavedFile({
        //         filePath: list[i].filePath,
        //       })
        //     }
        //   }
        // })
        wx.showModal({
          title: '提示',
          content: '图片保存成功，可在相册中查看',
          showCancel: false,
        })
      },

      fail(res) {
        wx.hideLoading()
        wx.showModal({
          title: '提示',
          content: '图片保存失败，请重试',
          showCancel: false
        })
      }
    })
  },
  toShare: function() {
    wx.showToast({
      title: '请点击右上角分享按钮',
      icon: "none"
    })

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function(e) {
    console.log(e);
    let _this = this;
    let share_type = e.from;
    return {
      title: '账号：' + _this.data.admin_no + "  密码：" + _this.data.admin_pwd,
      path: '/pages/Admin/BindAdmin/BindAdmin?admin_no=' + _this.data.admin_no + '&admin_pwd=' + _this.data.admin_pwd
    };
  },
  survived: function() {
    let vm = this
    // 创建画布对象
    const ctx = wx.createCanvasContext("myCanvas", vm)
    // base64格式图片转本地文件
    const fsm = wx.getFileSystemManager();
    const timestamp = Date.parse(new Date()); // 先创建时间戳用来命名（不加时间戳在画连续画第二张图的时候有问题）
    timestamp: timestamp / 1000
    const FILE_BASE_NAME = 'tmp_base64' + timestamp; //自定义文件名  因第二张图相同名字读取第一张故加个时间戳
    console.log(FILE_BASE_NAME)
    var base64data = vm.properties.adminQrcode; //base64格式图片
    const [, format, bodyData] = /data:image/(w+);base64,(.*)/.exec(base64data) || [];
    if (!format) {
      return (new Error('ERROR_BASE64SRC_PARSE'));
    }
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
    const buffer = wx.base64ToArrayBuffer(bodyData);
    console.log(filePath)
    fsm.writeFile({
      filePath,
      data: buffer,
      encoding: 'binary',
      success() {
        filePath;
      },
      fail() {
        return (new Error('ERROR_BASE64SRC_WRITE'));
      },
    });
    console.log(filePath)
    console.log(wx.env.USER_DATA_PATH)
    const basepath = `${wx.env.USER_DATA_PATH}`

    vm.setData({
      basepath: basepath
    });
    // console.log(filePath === filePath)
    // console.log(filePath)
    setTimeout(() => {
      wx.getImageInfo({
        src: filePath,
        success: function(res) {
          // 根据 图片的大小 绘制底图 的大小
          console.log(res) // 绘制底图的图片信息",
          let imgW = res.width
          let imgH = res.height
          let imgPath = res.path
          vm.setData({
            canvasHeight: imgH,
            canvasWidth: imgW
          })
          // 绘制底图 用原图的宽高比绘制
          ctx.drawImage(imgPath, 0, 0, 320, 320)
          // let srclogo = vm.data.codeImg // logo图片的路径
          // // 绘制logo
          // ctx.drawImage(srclogo, 12, imgH - 56, 240, 38)

          ctx.setFontSize(14)
          ctx.setFillStyle('#474B5B')
          ctx.fillText('账号：' + vm.data.admin_no, 100, 340)
          ctx.fillText('密码：' + vm.data.admin_pwd, 100, 370);

          ctx.draw()
          wx.showLoading({
            title: '获取图片中...',
            mask: true
          })
          setTimeout(() => {
            wx.canvasToTempFilePath({
              canvasId: 'myCanvas',
              success: function(res) {
                console.log(res) // 合成的带有logo得图片
                let tempFilePath = res.tempFilePath
                // 保存到相册
                console.log(tempFilePath);
                vm.setData({
                  tempFilePath: tempFilePath
                });
                wx.hideLoading()
                return;
                wx.saveImageToPhotosAlbum({
                  filePath: tempFilePath,
                  success(res) {
                    fsm.readdir({ // 读取目录内文件列表
                      dirPath: basepath,
                      success(res) {
                        res.files.forEach((val) => { // 遍历文件列表里的数据
                          console.log(val)
                          fsm.unlink({ // 清除writeFile保存的图片
                            filePath: basepath + '/' + val
                          });
                        })
                      },
                      fail(err) {
                        console.log(err)
                      }
                    })
                    // wx.getSavedFileList({
                    //   success: savedFileInfo => {
                    //     let list = savedFileInfo.fileList
                    //     console.log("list:", savedFileInfo.fileList)
                    //     for (let i = 0; i < list.length; i++) {
                    //       wx.removeSavedFile({
                    //         filePath: list[i].filePath,
                    //       })
                    //     }
                    //   }
                    // })
                    wx.showModal({
                      title: '提示',
                      content: '图片保存成功，可在相册中查看',
                      showCancel: false,
                    })
                  },

                  fail(res) {
                    wx.hideLoading()
                    wx.showModal({
                      title: '提示',
                      content: '图片保存失败，请重试',
                      showCancel: false
                    })
                  }
                })
              }
            }, vm)
          }, 1000)
        },
        fail(res) {
          wx.hideLoading()
          wx.showModal({
            title: '提示',
            content: '图片信息获取失败，请重试',
            showCancel: false
          })
        }
      })
    }, 100)
  },

})

wxss 文件

page {
  background: #fff;
}

.admin-qrcode {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.admin-qrcode image {
  height: 320px;
  width: 320px;
}

.admin-info {
}

.admin-info-no {
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-top: 10px;
}

.admin-info-pwd {
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-top: 10px;
}

.oper-btn {
  width: 100%;
  text-align: center;
  display: -webkit-flex;
  margin-top: 40px;
  color: #424656;
  font-size: 14px;
}

.oper-save {
  width: 50%;
  text-align: center;
  height: 60px;
  line-height: 30px;
  margin-top: 30px;
}

.oper-share {
  width: 50%;
  text-align: center;
  height: 60px;
  line-height: 30px;
}

.oper-icon-save {
  font-size: 36px;
  color: #2276ff;
}

.oper-icon-share {
  font-size: 36px;
  color: #3cb035;
}

.share-btn {
  border: none;
  background: #fff;
  font-size: 14px;
  display: inline;
  line-height: 30px;
}

button::after {
  border: none;
}