小程序生成二维码并保存相册

2022-02-28  本文已影响0人  全栈的猫南北

弹窗里包含生成的画布二维码,可保存到本地

<van-popup show="{{ showDialog }}" round close-on-click-overlay="{{false}}" bind:close="onClose" closeable>
  <view class="fileDialog">
    <view class="continer">
      <!-- <image class="image-w" src="{{qrCodeUrl}}"></image> -->
      <canvas class='image-w' canvas-id='qrcode' bindlongtap='save'></canvas>
    </view>
    <p class="pb20 pt20 btn">
      <text bindtap="saveCode" class="cobg">保存图片到相册</text>
    </p>
  </view>
</van-popup>

.js文件

声明基本信息

var QRCode = require('../../../utils/weapp-qrcode.js')
var qrcode;
const W = wx.getSystemInfoSync().windowWidth;
const rate = 750.0 / W;
const code_w = 400 / rate;

使用

  //查看二维码
  jumpCodeDeatil(e)
  {
    e = e.currentTarget.dataset
    let texturl = `https://sa.tszg360.com/fac?id=${e.item.id}`,
    qrcode = new QRCode('qrcode', {
      text: texturl,
      width: code_w,
      height: code_w,
      colorDark: "#1CA4FC",
      colorLight: "white",
      correctLevel: QRCode.CorrectLevel.H,
      callback: (res) => {
           // 生成二维码的临时文件
        this.setData({
          qrCodeUrl:res.path
        })
      }
  });

保存

//把当前画布指定区域的内容导出生成指定大小的图片。在 `draw()` 回调里调用该方法才能保证图片导出成功
    wx.canvasToTempFilePath({
      canvasId: 'qrcode',
      success: function (res) {
        debugger
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(ress) {
            wx.showToast({
              icon: "none",
              title: '保存成功',
            })
            this.setData({
              showDialog: false
            })
          }
        })
      }
    })
    //下载网络图片保存二维码到手机相册
    saveCode() {
      debugger
      wx.downloadFile({
        url: this.data.qrCodeUrl,
        success: (res) => {
          // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
          debugger
          if (res.statusCode === 200) {
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: (res) => {
              }
            })
          }
        }
      })
    },

参考:https://github.com/demi520/wxapp-qrcode

上一篇下一篇

猜你喜欢

热点阅读