小程序海报生成
在海报绘制中遇到的问题是蛮多的，尤其是二维码生成，二维码主要在后台生成，通过小程序api 进行调用，在整体中需要异步处理，直接上代码。
js ：
age({
data: {
bgpic: "../../static/images/member-qr.png",
codePath: '',
name: '',
mobile: '',
headImg: '',
},
onLoad: function (options) { // 接收上一页传来的数据
let that = this;
let userToken = wx.getStorageSync('userToken');
let name = options.name;
let mobile = options.mobile;
let heading = options.heading;
console.log(name);
console.log(heading);
console.log(mobile);
that.setData({
name: name,
mobile: mobile,
headImg: heading
});
that.createCanvasImage();
},
getCode: function (url){ // 使用请求接收后台二维码
return new Promise(function (resolve) {
let that = this;
let params = api.initWXACodeImgParam();
let pathUrl = api.reqUrl('getWXACodeUnlimited'); //接口文件，
params['token'] = api.token;
params['user_token'] = wx.getStorageSync('userInfo').user_token;
wx.request({
url: pathUrl, //请求地址
method: 'POST', //POST方式
data: params, //附加参数
responseType: 'arraybuffer',
success(res) {
console.log(res);
if(res.statusCode ==200 ){
let code = 'data:image/png;base64,' + wx.arrayBufferToBase64(res.data);
// resolve(code);
resolve(wx.arrayBufferToBase64(res.data));
}
},
fail:function(res){
}
});
}).then(function (result) {
console.log(result);
return result
});
},
async createCanvasImage(){
let that = this;
let codeUrl = await that.getCode();
let code = new Promise(function (resolve) {
const fs = wx.getFileSystemManager();
var code = wx.env.USER_DATA_PATH + '/' +'qrcode'+ '.png';
fs.writeFile({
filePath: code,
data: codeUrl,
encoding: 'base64',
success: (res) => {
resolve(code);
}
});
});
let headImg = new Promise(function (resolve) {
wx.getImageInfo({
src: that.data.headImg,
//临时图片
success: function (res) {
resolve(res.path)
},
fail: function (err) {
console.log(err)
wx.showToast({
title: '网络错误请重试',
icon: 'loading'
})
}
});
});
Promise.all([code, headImg]).then(function (result) {
console.log(result);
let ctx = wx.createCanvasContext('shareQrcode')
ctx.drawImage(that.data.bgpic, 0, 0, 328, 536);
ctx.drawImage(result[0], 211, 412, 100, 100);
ctx.save();
ctx.arc(46, 436,32,0, Math.PI * 2, true);
ctx.fill();
ctx.clip()
ctx.drawImage(result[1], 10, 402, 70, 70);
ctx.restore()
ctx.setFillStyle('black')
ctx.setFontSize(18)
ctx.fillText(that.data.name, 10, 496)
ctx.setFontSize(18)
ctx.setFillStyle('black')
ctx.fillText(that.data.mobile, 10, 516)
ctx.draw(true, setTimeout(function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 750,
height: 599,
destWidth: 725,
destHeight: 586,
canvasId: 'shareQrcode',
fileType: 'png',
success(res) {
that.setData({
codePath: res.tempFilePath
});
},
fail(res) {
wx.hideLoading();
wx.showToast({
title: '生成失败',
icon: "none",
duration: 1000
})
}
});
}, 1000))
}).catch();
},
bindCanvasSave: function () {
wx.showActionSheet({
itemList: ['保存图片'],
success: (result) => {
console.log(result);
if (result.tapIndex == 0) {
wx.saveImageToPhotosAlbum({
filePath: this.data.codePath,
success: (res) => {
wx.showToast({
title: '保存成功',
icon: "none",
duration: 1000
})
},
fail: (res) => {
wx.showToast({
title: '保存失败',
icon: "none",
duration: 1000
})
}
})
}
}
});
}