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 = this wx.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; // 设置背景图片src image.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() { } })