> 问题描述：
小程序某个页面中点击按钮，想要生成带有二维码的图片，后续保存本地。生成图片后转发微信中，后长按图片不会出现识别图中二维码的选项问题。
一年前写过一个分享页，当时大部分可以识别，只有偶尔某一次识别不出来，当时就没有解决，可产品还能过去。可最近写了一个新的页面也有二维码，生成图片逻辑是一套代码，可这次没有有一次成功的。你说这咋整，想偷懒还是过不去的，终究还是要为自己的懒惰付出，躲不过去的，如果不打算转行，还是别给自己留坑吧。填起来~~~~~~
对于生成海报的功能搜一搜遍地都是，在这里我就不展开说了，本篇就对二维码的绘制详细介绍下！
>问题处理重点：
- 首先说下二维码生成绘制方式：有两种! 第一种方式就是用canvas画出来（利用qrcode.js）。第二种将链接转成base64的链接，然后让图片展示链接(qrcode-base64)。两个JS代码百度可得，如需可私聊我。
第一种使用，上代码：
const QRCode = require('../utils/QRCode.js')
ctx.draw(true, () => {
// 画二维码
let qrCode = new QRCode("shareImg", { // shareImg是canvas标签中的canvas-id="shareImg"
width: 100 * fixWidth, // 二维码宽高，以及距离画布的顶部左边的定位距离
height: 100 * fixWidth,
left: 520 * fixWidth,
top: 1132 * fixWidth,
typeNumber: 2
})
qrCode.makeCode(qrStr, () => { // qrStr是二维码地址如：https://www.baidu.com
// 二维码画成功
setTimeout(() => {
// 生成图片
createImage(that) // 继续执行生成图片操作wx.canvasToTempFilePath()
}, 300)
})
})
完工！这也就是我一年前的使用方式，本来也是好好地。可这次怎么都不行了。百度后知道了，因为第一次的时候，页面地址比较短，而且UI二维码图片比较大。但是这一次，很长的链接，二维码大小又变小了。奈何生成的二维码特别密集，手机根本识别不出来，无奈前功尽弃了，只能换其他的技术方案。 这也就是为什么我同一个方法效果不同的原因了。这种方式的清晰度和图片的URL及UI大小都有关系。所以如果和我遇到相同问题的同学，如果想快速解决上线，就可以把二维码UI调大，地址变短；这就几分钟就可以提交审核，后面我们在去研究其他方法（方法二）。但是目前这个大小和清晰度的关系我不是很清楚，有同学知道的可以告知一下，非常感谢！
接下来我们来研究第二种比较稳的方式，形成base64文件。
这种方式确实相对于第一种方式来说太棒了，即使二维码UI很小也能识别出来呢。
------原理：利用qrcode-base64 将二维码的URL链接，转成base64；因为小程序不能直接显示base64，所以接下来我们就利用创建读写流wx.getFileSystemManager()把base64通过writeFile写入本地，获得到一个临时文件地址；然后drawImage绘制出来就可以了。
下面我们就来看下他的代码实现：
const QR = require('../utils/weapp-qrcode.js')
var base64Data = QR.drawImg(qrStr, { // 二维码地址URL
typeNumber: 4,
errorCorrectLevel: 'M',
size: 500
})
// console.log(base64Data); // base64地址
/* 创建读写流 */
const fs = wx.getFileSystemManager()
const times = new Date().getTime()
const codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png'
/* 将base64图片写入 */
fs.writeFile({
filePath: codeimg,
data: base64Data.slice(22), /* 数据流 */
encoding: 'base64',
success: () => {
ctx.drawImage(codeimg,520 * fixWidth, 1132 * fixWidth,50 * fixWidth, 50 * fixWidth)
console.log(codeimg);
ctx.draw(true, () => {
setTimeout(() => {
// 生成图片
createImage(that)
}, 300)
})
},
fail(res) {
console.error(res)
}
})
好了。到目前为止，可以把二维码大小改小，二维码也可以识别无误了。本以为万事大吉了。结果看网友说writeFile写入是有一定的空间大小的，如果一直写入到达一定空间后会写入不进去，就会报错。所以需要实时清理。那好吧，为了以防万一我们就在保存图片成功后，调用下清除函数removeSave() 去清空下内存。
下面是清缓函数代码：（原理：首先用FileSystemManager.readdir来拿到文件列表，再通过FileSystemManager.unlink把文件删掉）
// 把写入的文件删除，防止超过最大范围而无法写入，报错
const removeSave = () =>{
return new Promise((resolve)=>{
const fsm = wx.getFileSystemManager(); //文件管理器
fsm.readdir({ // 获取文件列表
dirPath: wx.env.USER_DATA_PATH,// 当时写入的文件夹
success(res){
console.log(res);
res.files.forEach((el) => { // 遍历文件列表里的数据 （把不是.png后缀的过滤掉）
if(el.includes('.png')){
// 删除存储的垃圾数据
fsm.unlink({
filePath: `${wx.env.USER_DATA_PATH}/${el}`, // 这里注意。文件夹也要加上，如果直接文件名的话会无法找到这个文件
fail(e){
console.log('readdir文件删除失败：',e)
}
});
}
})
resolve()
}
})
})
}
到目前为止全部说完！ 有问题 欢迎大家评论交流点赞哦~~~~~ 一起踩坑