微信小程序前端生成二维码并保存图片

• 1. 利用wxbarcode生成二维码

引入wxbarcode

可以通过npm安装

npm install wxbarcode

也可以直接引用该插件

使用方法：

import wxbarcode from 'wxbarcode'

wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420);

wxml:

<canvas class="qrcode" canvas-id="qrcode"/>
<button class="btn" type="primary" bindtap="saveImage">下载该二维码</button>

js

// index.js
import wxbarcode from '../../utils/wxbarcode'
// 获取应用实例
const app = getApp()
Page({
  data: {},
  onLoad() {
    wxbarcode.qrcode('qrcode', '123456789', 420, 420);
  }
})

效果：

• 2. 利用wx.canvasToTempFilePath导出生成指定大小的图片

onReady () {
  let that = this;
  wx.canvasToTempFilePath({
    canvasId: 'qrcode',
      success: function (res) {
          that.setData({shareImg: res.tempFilePath})
      },
      fail: function (res) {
          wx.showToast({title: '图片生成失败'});
          console.log("图片生成失败error", res)
      }
  }, this)
}

• 3.利用wx.getImageInfo获取图片信息，wx.saveImageToPhotosAlbum保存图片到系统相册

saveImg () {
    let url = this.data.shareImg;
    wx.getImageInfo({
        src: url,
        success: (res) => {
            let path = res.path;
            wx.saveImageToPhotosAlbum({
                filePath: path,
                success: (res) => {
                    console.log(res);
                    wx.showToast({
                        title: '已保存到相册',
                    })
                },
                fail: (res) => {
                    console.log(res);
                }
            })
        },
        fail: (res) => {
            console.log(res);
        }
    })
  }

参考资料：

https://github.com/alsey/wxbarcode#readme

https://developers.weixin.qq.com/miniprogram/dev/api/