wxml

 <canvas style="width: 100%;height: 100%;margin-left: 20%;" id="Canvase" type="2d"></canvas>

js

// pages/code/code.js
Page({/*** 页面的初始数据*/data: {code: '',},/*** 生命周期函数--监听页面加载*/onLoad(options) {var that = thiswx.request({url: '接口数据', //仅为示例，并非真实的接口地址data: {userid: 36,scienceid: 1,},header: {'content-type': 'application/json' // 默认值},success(res) {console.log(res);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;// 设置背景图片srcimage.src = 'https://pic.imgdb.cn/item/647d31011ddac507cc160e75.jpg'bg.src = codeimg;image.onload = function () {ctx.drawImage(image, 0, 0, 289, 370)ctx.drawImage(bg, 76, 175, 140, 140);}// 将图片保存需要的实例，不写保存可以不需要that.setData({ctx: canvas})  })}})}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})