data: {
// 屏幕可用宽高
windowWidth: wx.getSystemInfoSync().windowWidth,
windowHeight: wx.getSystemInfoSync().screenHeight,
// 图片预览本地文件路径
previewImageUrl: null
},
buildPosterSaveAlbum: function() {
var imgWidth = 0; // 主图的宽度
var imgHeight = 0; // 主图的高度
let that = this;
wx.showLoading({
title: '海报生成中...',
})
// 获取图1信息
// tip 貌似本地静态文件路径不能作为画布的src 参数,网络图片无影响。
let promise1 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKvEFUUhmicMJVARZicC9ApzqvlFbSibsX1Nc4nibhWPJ2xGia4wThpS8AViaoFPCGd4GHk0xrp9MHBYCpA/132',
success: function(res) {
console.log(res)
imgWidth = res.width; // 设置主图的宽度
imgHeight = res.height; // 设置主图的高度
resolve(res);
},
fail: function(res) {
reject(res)
}
})
});
console.log(imgWidth);
console.log(imgHeight)
// // 获取图2信息,二维码图片,后期在服务器获得
// let promise2 = new Promise(function(resolve, reject) {
// wx.getImageInfo({
// src: 'https://wx.qlogo.cn/mmhead/XBu6rjtdhtCcrAPKNLfiaaVwMSaaOGDx8kzewniaicmVicM/132',
// success: function(res) {
// resolve(res);
// },
// fail: function(res) {
// reject(res)
// }
// })
// });
//头像
// let promise3 = new Promise(function(resolve, reject) {
// wx.getImageInfo({
// src: wx.getStorageSync("userInfo").userInfo.avatarUrl,
// success: function(res) {
// resolve(res);
// },
// fail: function(res) {
// reject(res)
// }
// })
// });
// 执行
Promise.all(
[promise1]
).then(res => {
// 获取宽高
let wW = that.data.windowWidth;
var imgH = imgHeight / (imgWidth / wW) * 0.9;
let wH = imgH + 200;
that.setData({
windowHeight: imgH + 200
});
// 定义画布上下文常量
const ctx = wx.createCanvasContext('firstCanvas');
//背景白色
ctx.setFillStyle('white');
//从x=0,y=0开始绘制白色
ctx.fillRect(0, 0, wW, wH);
//图1
console.log(res);
ctx.drawImage(res[0].path, wW * 0.05, wW * 0.05, wW * 0.9, imgH);
//图2
// ctx.drawImage(res[1].path, wW * 0.7, imgH + 40, wW * 0.25, wW * 0.25);
//绘制谁推荐的文字
// ctx.drawImage(res[2].path, wW * 0.05, imgH + 40, wW * 0.09, wW * 0.09);
ctx.setFillStyle("#007382");
ctx.setFontSize(20);
// var nickName = wx.getStorageSync("userInfo").NickName;
console.log('nickName')
var nickName = "hahah";
if (nickName.length >= 8 && nickName.length != 8) {
nickName = nickName.substring(0, 8) + "..";
}
var tuijian = nickName + "为你推荐";
ctx.fillText(tuijian, (wW * 0.05) + (wW * 0.09) + 10, imgH + 60 + ((wW * 0.09) / 8));
ctx.setFillStyle('#000000');
ctx.setFontSize(18);
let str = '多头玫瑰1扎29.9元(随机颜色)范德萨范德萨范德萨范德萨发生的啊';
if (str.length >= 10 && str.length != 10) {
str = str.substring(0, 10) + "...";
}
ctx.fillText(str, (wW * 0.05) + (wW * 0.09) + 7, imgH + 60 + wW * 0.09);
// 绘制文字
//ctx.lineWidth = 0;
//ctx.fillText("29.9", wW * 0.05, wW * 1.08)
ctx.setFillStyle('#ff2200');
ctx.setFontSize(23);
ctx.fillText("¥29.99", (wW * 0.05) + (wW * 0.09) + 2, imgH + 60 + wW * 0.1 + 35)
//ctx.save();
ctx.draw();
//destWidth值越大图片越清晰/大小成正比 解决画布模糊的问题
//详细的参数见画布文档
setTimeout(function() {
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
width: wW,
height: wH,
destWidth: wW * 3,
destHeight: wH * 3,
quality: 1,
fileType: "png",
success: function success(res) {
console.log('转图片结果');
// 关闭loading
wx.hideLoading();
// 到page对象的data中
that.setData({
previewImageUrl: res.tempFilePath
})
console.log("tempFilePath:+++" + res.tempFilePath);
wx.previewImage({
current: that.data.previewImageUrl,
urls: [that.data.previewImageUrl]
})
},
complete: function complete(e) {
console.log(e.errMsg);
}
});
}, 300);
}).
catch(err => {
//error 错误处理
})
},