base64src(base64data, cb) {
const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
if (!format) {
return (new Error('ERROR_BASE64SRC_PARSE'));
}
const time = new Date().getTime(); //自定义文件名
const filePath = `${wx.env.USER_DATA_PATH}/${time}.${format}`;
const buffer = wx.base64ToArrayBuffer(bodyData);
fsm.writeFile({
filePath,
data: buffer,
encoding: 'binary',
success() {
cb(filePath);
},
fail() {
return (new Error('ERROR_BASE64SRC_WRITE'));
},
});
}
2.获取图片信息
wx.getSystemInfo({
success(res) {
let rpx = res.windowWidth / 375;
self.createImage(rpx);
}
})
getImage(url) {//获取图片信息
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: url,
success: (res) => {
resolve(res)
},
fail: () => {
reject("")
}
})
})
}
getImageAll(image_src) {
let that = this;
var all = [];
image_src.map((item) => {
all.push(that.getImage(item))
})
return Promise.all(all)
}
//创建
createImage(rpx) {
let that = this;
//图片一把是通过接口请求后台,返回俩点地址,或者网络图片
//图片区别下载完成,生成临时路径后,在尽心绘制
this.getImageAll([this.bgUrl, this.codeUrl]).then((res) => {//bgUrl背景图片codeUrl 转化后的二维码url
let bg = res[0];
let qr = res[1];
let bgW = bg.width;
let bgH = bg.height;
//设置canvas width height position-left, 为图片宽高
let ctx = wx.createCanvasContext('canvas');
ctx.drawImage(bg.path, (this.canvasWidth - 260) / 2 * rpx, 30 * rpx, 260 * rpx, 270 * rpx);
ctx.drawImage(qr.path, Math.floor((this.canvasWidth - qr.width * 0.35) / 2), 400 * rpx, Math.floor(qr.width * 0.35), Math.floor(qr.width * 0.35))
ctx.setFontSize(16 * rpx);
ctx.setFillStyle('#333');
ctx.setTextAlign('center');
ctx.fillText(that.distribution.ItemName, (this.canvasWidth / 2) * rpx, 340 * rpx, 100 * rpx, 100 * rpx);
ctx.setFontSize(22 * rpx);
ctx.setFillStyle('#EE843F');
ctx.setTextAlign('center');
ctx.fillText('海报标题', (this.canvasWidth / 2) * rpx, 376 * rpx, 100 * rpx, 100 * rpx);
ctx.draw(true);
that.isShow = true;
that.closeLoading();
that.$apply();
})
}
//保存
saveImage() {
wx.canvasToTempFilePath({ //canvas 生成图片 生成临时路径
canvasId: 'canvas',
success: function(res) {
wx.saveImageToPhotosAlbum({ //下载图片
filePath: res.tempFilePath,
success: function() {
wx.showToast({
title: "保存成功",
icon: "success",
})
}
})
}
})
}
备注:1.一定要处理base64路径;2.注意ctx.fillText参数的含义(还踩了很多坑,想起来就补充)