<canvas style="width: 100%;height: 100%;margin-left: 20%;" id="Canvase" type="2d"></canvas>
// 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() {
}
})
原文地址:https://blog.csdn.net/zybijiso666/article/details/134623735
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_26334.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。