wxml
html
<canvas style="width: 100%;height: 100%;margin-left: 20%;" id="Canvase" type="2d"></canvas>
js
javascript
// 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() {
}
})