小程序-Taro如何实现利用Canvas生成一个二维码以及保存图片

不多说，直接看代码和文字见解：

第一步：先安装weapp-qrcode，利用一个函数触发drawQrcode的方法生成一个二维码Canvas

npm install weapp-qrcode --save

 

handleChange() {
        drawQrcode({
            width: 180,//宽
            height: 180,//高
            canvasId: 'myQrcode',//绑定canvas的id
            text: '111'//识别二维码里面的内容数据
        })
        this.createShareQr() 
    }

到这一步其实你的二维码几乎成型了，但是你还有要把它给展示出来

第二步：调用Taro.canvasToTempFilePath的Taro文档的方法，他是用来将Canvas转换为临时路径的图片。

 

 // 将canvas转换为二维码图片
    createShareQr = () => {
        let that = this
        Taro.canvasToTempFilePath({
            canvasId: 'myQrcode',
            success(res) {
                console.log(res, 'res')
                let tempFilePath = res.tempFilePath;
                that.setState({
                    qrImagePath: tempFilePath,

                }, that.onPreviewImage)
            }
        })

    }

到这里你已经可以拿到二维码图片的路径地址，后面直接用Image标签。

二维码图片保存功能：

方法1：

可以先利用Taro.previewImage让图片进入预览模式，直接调用微信小程序的原生保存方法（长按图片保存）

onPreviewImage = () => {
        Taro.previewImage({
             urls: [get(this.state, 'qrImagePath')]//图片路径
         }) 
    }

方法2：

利用Taro.saveImageToPhotosAlbum实现图片保存，但是你先需要得到图片库的授权（Taro.openSetting授权）

 // 保存图片至本地
  saveToAlbum = () => {
    Taro.saveImageToPhotosAlbum({
      filePath: this.state.shareImage,//需要保存的图片路径
      success(res) {
        Taro.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 2000,
        });
      },
      fail() {
        Taro.showModal({
          title: '提示',
          content: '需要您授权保存相册',
          showCancel: false,
          success() {
            Taro.openSetting({
              success(settingdata) {
                if (settingdata.authSetting['scope.writePhotosAlbum']) {
                  Taro.showModal({
                    title: '提示',
                    content: '获取权限成功,再次保存图片即可成功',
                    showCancel: false,

                  })
                } else {
                  Taro.showModal({
                    title: '提示',
                    content: '获取权限失败，无法保存到相册',
                    showCancel: false,

                  })
                }

              }

            });
          }
        });
      }
    })
  }

有点需要注意Taro.openSetting使用要搭配Taro.showModal