[移动开发]微信小程序 Canvas 动态生成二维码并保存到本地

let drawQrcode = require("../../../utils/erweima.js");

wxml中：

   <canvas class="code" canvas-id="myQrcode"></canvas>
   <button class='downCode' bindtap='downloadCode'>下载二维码</button>
   <view class="code-content">{{text}}<view class="copy" bindtap="clickCopy">复制</view></view> 

js文件中数据：

data: {
    text: '', // 生成二维码的数据
    imagePath: "" // 保存图片的临时路径
},

通过后台接口拿到数据 text

  // 生成二维码
  draw() {
    drawQrcode({
      width: 200, // 画出的二维码的宽高，单位为px
      height: 200,
      x:20, // 开始画的位置，x轴y轴
      y:20,
      canvasId: 'myQrcode', // 拿到canvas节点
      text: this.data.text // 文本数据
    })
    this.canvasToTempImage() // 画完之后获取临时路径
  },
  
  // 复制文本数据
  clickCopy(e) {
    var that = this;
    wx.setClipboardData({
      data: that.data.text,
      success: function (res) {
        wx.showToast({
          title: '复制成功',
          icon: 'none'
        });
      }
    });
  },
		
  // 获取二维码图片的临时路径
  canvasToTempImage: function () {
    var that = this;
    wx.canvasToTempFilePath({
      canvasId: 'myQrcode',
      success: function (res) {
        var tempFilePath = res.tempFilePath;
        that.setData({
          imagePath: tempFilePath,
        });
      },
      fail: function (res) {
        console.log(res);
      }
    });
  },
 
 // 下载图片
 downloadCode: function (res) {
    var filePath = this.data.imagePath
    console.log('下载中' + filePath)
    wx.saveImageToPhotosAlbum({
      filePath: filePath,
      success: function(res) {
        wx.showToast({
           title: '图片保存成功',
           icon: 'success',
           duration: 2000 //持续的时间
        })
      },
      fail: function (err) {
         console.log(err)
         wx.showToast({
         title: '图片保存失败',
         icon: 'none',
         duration: 2000//持续的时间
         })
      }
    })
  } 

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖