小程序绘制二维码并保存图片到系统相册

​​

前言

近几天也是实现公司的一个业务场景，使用到了二维码生成保存图片这个功能，也是遇到了很多坑啊，简单记录下。

---

提示：以下是具体我的遇坑流程

一、起初是用Painter这个库实现的

Painter库地址

一开始也是直接把库下载下来

直接丢到小程序的components里面创建了一个组件，按照库的文档一顿操作，最后在开发工具上测试了生成和保存图片，没有一点毛病，然后真机预览的时候发现绘制的二维码缺失了，很离谱!

找到了类似的问题，但是最后还是找不到原因，于是苦逼的换了一个库 

二、weapp-qrcode

weapp-qrcode库地址

1.下载下来

复制框选的js文件到小程序

 我这里放到了utils里面

2.代码部分

import drawQrcode from '../../utils/weapp.qrcode.esm.js'

 对应页面引入js

<view class="qrcode">
    <canvas  canvas-id="myQrcode" />
</view>

 wxml写入canvas样式需要设置下

.qrcode{
  display: flex;
  justify-content: center;
  margin-top: 38rpx;
}
.qrcode canvas{
  width: 160px;
  height: 160px;
}

生成二维码方法

qrCode() {
    drawQrcode({
      width: 160,
      height: 160,
      canvasId: 'myQrcode',
      text: '二维码',
      //可绘制中间图片
      // image: {
      //   imageResource: '../../assets/img/cl.png',
      //   dx: 70,
      //   dy: 70,
      //   dWidth: 60,
      //   dHeight: 60
      // }
    })
},

 保存到系统相册方法

 handleImgSave() {
   wx.canvasToTempFilePath({
     canvasId: 'myQrcode',
     success(res) {
       wx.saveImageToPhotosAlbum({
         filePath: res.tempFilePath,
         success(res) {
           showToast('保存成功!', 'none')
         },
         fail(err) {
           showToast('保存失败!', 'none')
         }
       })
     }
   })
 },

这里showToast是内部二次封装过的 

总结

这玩意总算没问题了，就是一开始使用Painter库花了很多时间，也不知道什么原因导致二维码缺失，希望能对各位新时代农民工有所帮助，少费点脑子。