在请求接口的success下面写入这段代码。
在他的上一个请求数据的打他下面创建一个空的用于存放数据的东西比如obj：" "用于存放数据。
将它放到一个一个点击事件中，通过触发点击事件执行代码
如果窒息看代码的话const tupian 这个变量让他等有一张网络图片。
1. // 开始 2. const query = wx.createSelectorQuery() 3. query.select('#myCanvas') 4. .fields({ 5. node: true, 6. size: true 7. }) 8. .exec((res) => { 9. const tupian = 'https://pic.imgdb.cn/item/649bdde41ddac507cca5dfab.jpg'; 10. const canvas = res[0].node 11. const ctx = canvas.getContext('2d') 12. const dpr = wx.getSystemInfoSync().pixelRatio 13. canvas.width = res[0].width * dpr // 获取宽 14. canvas.height = res[0].height * dpr // 获取高 15. ctx.scale(dpr, dpr) 16. 17. // 到这里就可以直接绘制 //可注释 18. let image = canvas.createImage();//创建iamge实例 19. image.src = tupian; // 引入网络图片 20. image.onload = function () { 21. ctx.drawImage(image, 0, 0, 270, 370); // 背景图 22. // 可注释结束 23. // 绘制base64图片 24. //声明文件系统 25. const fs = wx.getFileSystemManager(); 26. var times = new Date().getTime(); 27. var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png'; 28. console.log(that.data.base, 'dfghjklkjhgfdghjk') 29. console.log(tupian); 30. //将base64图片写入 31. fs.writeFile({ 32. 33. filePath: codeimg, 34. data: that.data.base.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,) 35. encoding: 'base64', 36. success: () => { 37. console.log(codeimg); 38. wx.createSelectorQuery().select('#myCanvas').fields({ 39. node: true, 40. size: true 41. }) 42. .exec((res) => { 43. let ctx = res[0].node.getContext('2d'); //getContext返回Canvas 的绘图上下文 44. let canvas = res[0].node; 45. const bg = canvas.createImage(); 46. bg.src = codeimg; 47. bg.onload = function () { 48. ctx.drawImage(bg, 65, 170, 140, 140); 49. } 50. }) 51. } 52. }) 53. } 54. });
