//将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
createNewImg: function (that) {
let { indexImg, activityInfo, qrcode, logUrl} = that.data
let imginfo = activityInfo.data.userHelpList
const wxGetImageInfo = promisify(wx.getImageInfo)
Promise.all([
wxGetImageInfo({
src: activityInfo.data.activity.info.share_image
}),
wxGetImageInfo({
src: 'https://cdn3.maxuscloud.com/mapp/aswxmp/images/cut_price/poster_cloud.png?v=3.1.7'
}),
wxGetImageInfo({
src: 'https://cdn3.maxuscloud.com/mapp/aswxmp/images/cut_price/poster_bg.png?v=3.1.7'
}),
wxGetImageInfo({
src: 'https://cdn3.maxuscloud.com/mapp/aswxmp/images/cut_price/fingerprint.png?v=3.1.7'
}),
wxGetImageInfo({
src: imginfo[imginfo.length-1].user_info.pic
}),
wxGetImageInfo({
src: logUrl
}),
]).then(res => {
console.log(res)
const ctx = wx.createCanvasContext('mycanvas')
// 底图
ctx.setFillStyle("#FFF")
ctx.fillRect(0, 0, 390, 1200)
ctx.drawImage(res[0].path, 0, 0, 390, 330)
ctx.drawImage(res[1].path, 0, 290, 390, 800)
ctx.drawImage(res[2].path, 0, 350, 370, 350)
ctx.drawImage(res[3].path, 200, 520, 100, 100)
circleImg(ctx,res[4].path, 150, 330, 30, 30)
ctx.drawImage(res[5].path, 50, 510, 120, 120)
//绘制标语
ctx.setFontSize(16);
ctx.lineWidth = 10;
var titleHeight = 440; // 标题的高度
var canvasWidth = 300;//计算canvas的宽度
var initHeight = 430;
var str = `${activityInfo.data.activity.mark}活动价${activityInfo.data.activity.price}砍至底价仅需${activityInfo.data.activity.price_mix}元,快来帮我砍砍砍!`
ctx.setFillStyle('#333333');
ctx.setTextAlign('left');
titleHeight = this.drawText(ctx, str, initHeight, titleHeight, canvasWidth);
ctx.moveTo(40, titleHeight)
ctx.lineTo(325, titleHeight)
ctx.setLineWidth(0.5)
ctx.setStrokeStyle('#64b28d')
ctx.stroke();
// 文字
ctx.setTextAlign('center') // 文字居中
ctx.setFillStyle('#000000') // 文字颜色:黑色
ctx.setFontSize(16) // 文字字号
ctx.fillText("扫一扫或长按识别二维码", 370 / 2, 659)
// 小程序码
const qrImgSize = 200
// ctx.drawImage(res[1].path, (600 - qrImgSize) / 2, 530, qrImgSize, qrImgSize)
ctx.stroke()
ctx.draw()
})
wx.showToast({
title: '生成中...',
icon: 'loading',
duration: 3500
});
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
// var a = tempFilePath + "?unixtimestamp=" + Math.round(new Date().getTime() / 1e3)
that.setData({
imagePath: tempFilePath,
canvasHidden: true
})
},
fail: function (res) {
console.log(res,'1111111111');
}
});
wx.hideToast()
}, 3000);
},
//点击保存到相册
baocun: function () {
var that = this
console.log('path',that.data.imagePath)
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success(res) {
wx.showModal({
content: '图片已保存到相册,赶紧晒一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
/* 该隐藏的隐藏 */
that.setData({
maskHidden: false
})
}
}, fail: function (res) {
console.log(11111)
}
})
}
})
},
//文字换换行
drawText: function (ctx, str, initHeight, titleHeight, canvasWidth) {
var lineWidth = 0;
var lastSubStrIndex = 0; //每次开始截取的字符串的索引
for (let i = 0; i < str.length; i++) {
lineWidth += ctx.measureText(str[i]).width;
if (lineWidth > canvasWidth) {
ctx.fillText(str.substring(lastSubStrIndex, i), 35, initHeight);//绘制截取部分
initHeight += 30;//20为字体的高度
lineWidth = 0;
lastSubStrIndex = i;
titleHeight += 30;
}
if (i == str.length - 1) {//绘制剩余部分
ctx.fillText(str.substring(lastSubStrIndex, i + 1), 35, initHeight);
}
}
// 标题border-bottom 线距顶部距离
titleHeight = titleHeight + 10;
return titleHeight
},
//转发生成海报
GetBargainPoster:function(){
console.log("最终调用",this.data.logUrl)
var that = this;
this.setData({
maskHidden: false,
shareMenuHidden: !0
});
wx.showToast({
title: '生成中...',
icon: 'loading',
duration: 3500
});
setTimeout(function () {
wx.hideToast()
that.createNewImg(that);
}, 3000)
that.setData({
maskHidden: true
});
},