大家好，今天在做小程序时有一个推广的小程序二维码，下面我们来看看是如何制作的。
这个base64码是后台接口获取到的，所以要先将数据获取到，获取到数据后有些朋友不知道该怎么用到方法里，在方法内部获取不到base64码。
代码如下：
<canvas type="2d" id="myCanvas" style="width: 100%;height: 100vh;border-radius: 5px;" bindlongtap="save"></canvas>
js
Page({ data: { code: "" }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { let that = this; let userid = getApp().globalData.userid; }, onReady() { let base=this.data console.log(base); const query = wx.createSelectorQuery() query.select('#myCanvas') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr // 获取宽 canvas.height = res[0].height * dpr // 获取高 ctx.scale(dpr, dpr) wx.request({ url: ', //这里是你的接口 data: { }, method: 'POST', success: res=> { console.log(res); var code = res.data; let image = canvas.createImage();//创建iamge实例 image.src = 'https://pic.imgdb.cn/item/63be1365be43e0d30e0e8540.jpg'; // 引入图片 image.onload = function () { ctx.drawImage(image, 0, 0, 375, 610); // 背景图 // 绘制base64图片 //声明文件系统 const fs = wx.getFileSystemManager(); var times = new Date().getTime(); var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png'; //将base64图片写入 fs.writeFile({ filePath: codeimg, data: code.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,) encoding: 'base64', success: () => { console.log(codeimg); wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }) .exec((res) => { let ctx = res[0].node.getContext('2d');//getContext返回Canvas 的绘图上下文 let canvas = res[0].node; const bg = canvas.createImage(); bg.src = codeimg; bg.onload = function () { ctx.drawImage(bg, 85, 300, 210, 210); } }) } }); } } }); // 到这里就可以直接绘制 }) }, });
