页面有三部分的图片。logo。二维码和背景图。其中背景图是本地的。
logo和二维码是接口给的。
像这样的海报合成的例子我写过一篇,是在vue的项目中的vue把几张图片logo。二维码。背景合成一个海报并下载,使用canvas
但是小程序里面不支持使用var img=new Image(); 他会有这个文章里面的报错。
//把网络图片改成本地图片
getNetworkImage(url) {
return new Promise((resolve, reject) => {
uni.downloadFile({
url,
success: (e) => {
const p = e.tempFilePath
if (p.indexOf('json') > -1) {
reject(p)
return false
}
resolve(p)
},
fail: (r) => {
reject(r)
}
})
})
},
//把base64图片转为本地图片
base64ToSave(base64data, FILE_BASE_NAME = 'tmp_base64src') {
const fsm = uni.getFileSystemManager();
return new Promise((resolve, reject) => {
//format这个跟base64数据的开头对应
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
if (!format) {
reject(new Error('ERROR_BASE64SRC_PARSE'));
}
const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
const buffer = wx.base64ToArrayBuffer(bodyData);
fsm.writeFile({
filePath,
data: buffer,
encoding: 'binary',
success() {
resolve(filePath);
},
fail() {
reject(new Error('ERROR_BASE64SRC_WRITE'));
},
});
});
},
我的二维码和logo都是接口传的数据。这里都转为本地的。
genQrFile1() {
var urlQR = this.base64ToSave(this.qrBase64);//二维码。base64转为本地图片
var logo=this.getNetworkImage(this.userinfo.logo1);//机构logo网络图片转为本地图片
let that = this;
Promise.all([
urlQR,logo
]).then(res => {
that.qrUrl=res[0]
let ctx = uni.createCanvasContext('firstCanvas', this);
ctx.drawImage("/pages_st