1设置一个canvas标签
<canvas style="width: 300px; height: 450px;" id="Canvase" type="2d" ></canvas>
2获取接口数据的图片数据
wx.request({ url: '接口地址', //仅为示例，并非真实的接口地址 data: { 请求参数 }, header: { 'content-type': 'application/json' // 默认值 }, success(res) { console.log(res); } })
2在成功回调中写入
const fs = wx.getFileSystemManager(); var codeimg = wx.env.USER_DATA_PATH + '/' + '.jpg'; fs.writeFile({ filePath: codeimg, data: res.data.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,) encoding: 'base64', success: () => { // console.log(codeimg); wx.createSelectorQuery().select('#Canvase').fields({ node: true, size: true }) .exec((res) => { console.log(res); let ctx = res[0].node.getContext('2d'); //getContext返回Canvas 的绘图上下文 let canvas = res[0].node; const bg = canvas.createImage(); //背景图片 const image = canvas.createImage(); // 图片高清化 const dpr = wx.getSystemInfoSync().pixelRatio; res[0].node.width = res[0].node.width * dpr; res[0].node.height = res[0].node.height * dpr; // 设置背景图片src image.src = '背景图片地址' bg.src = codeimg; image.onload = function () { ctx.drawImage(image, 0, 0, 900, 440) ctx.drawImage(bg, 240, 210, 430, 160); } // 将图片保存需要的实例，不写保存可以不需要 that.setData({ ctx:canvas }) }) } })
