美文网首页
小程序生成二维码并保存相册

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

作者: 全栈的猫南北 | 来源:发表于2022-02-28 11:34 被阅读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

    相关文章

      网友评论

          本文标题:小程序生成二维码并保存相册

          本文链接:https://www.haomeiwen.com/subject/hpklrrtx.html