const drawShareImg = function (that) {
let bg = 'https://dahoutai.side.vip/project/app/img/mall-shareimg-bg.jpg'
let titleBg = 'https://dahoutai.side.vip/project/app/img/mall-shareimg-title.png'
let shareGoods = [
'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
'https://dahoutai.side.vip/undefined/12fbe0e9337a8a936390530e3d3d454f.jpg',
]
wx.showToast({
title: '生成海报中...',
mask: true,
icon: 'loading'
})
let num = 0
wx.getImageInfo({
src: bg,
success: function (res) {
let rate = 0.5 // 缩小比例
let ctx = wx.createCanvasContext('myCanvas')
ctx.drawImage(res.path,0,0,690*rate,1031*rate) // 背景
wx.getImageInfo({
src: titleBg,
success: function (res) {
ctx.drawImage(res.path, 0, 0,690*rate,211*rate) // 背景标题
let shareGoodsLen = shareGoods.length
for(let i=0;i<shareGoodsLen;i++){
console.log(shareGoods[i])
wx.getImageInfo({
src: shareGoods[i],
success: function (res) {
shareGoods[i] = res.path
++ num
if(num == shareGoodsLen){ // 这里有个异步问题
console.log('开始画图')
// 先画商品分享图的白色背景，背景高度需要根据3的倍数计算函数
// 定位每个商品图片x和y轴
let line = Math.ceil(shareGoodsLen/3) // 行数
let xy = [
{ x: (30+30)*rate,y: (246+30)*rate },
{ x: (30+225)*rate,y: (246+30)*rate },
{ x: (30+420)*rate,y: (246+30)*rate },
{ x: (30+30)*rate,y: (246+226)*rate },
{ x: (30+225)*rate,y: (246+226)*rate },
{ x: (30+420)*rate,y: (246+226)*rate },
{ x: (30+30)*rate,y: (246+421)*rate },
{ x: (30+225)*rate,y: (246+421)*rate },
{ x: (30+420)*rate,y: (246+421)*rate }
]
// 白色背景
ctx.beginPath();
ctx.save();
ctx.setLineWidth(1)
ctx.setStrokeStyle('#fff')
ctx.moveTo(40*rate,246*rate); // 创建开始点
ctx.lineTo(650*rate,246*rate); // 创建水平线
ctx.arcTo(660*rate,246*rate,660*rate,256*rate,20*rate); // 创建弧
ctx.lineTo(660*rate,868*rate); // 创建垂直线
ctx.arcTo(660*rate,878*rate,650*rate,878*rate,20*rate); // 创建弧
ctx.lineTo(40*rate,878*rate); // 创建水平线
ctx.arcTo(30*rate,878*rate,30*rate,868*rate,20*rate); // 创建弧
ctx.lineTo(30*rate,256*rate); // 创建垂直线
ctx.arcTo(30*rate,246*rate,40*rate,246*rate,20*rate); // 创建弧
ctx.closePath()
ctx.clip();
ctx.fillStyle="#fff";
ctx.fillRect(0,0,500,500);
ctx.stroke();
ctx.restore();
shareGoods.forEach((e,idx)=>{
ctx.beginPath();
ctx.save();
let width = 160*rate
let radius = 8*rate
let angleLine = 10*rate
// { x: (30+30)*rate,y: (246+30)*rate },
ctx.setLineWidth(1)
ctx.setStrokeStyle('#E9E9E9')
ctx.moveTo(xy[idx].x+angleLine,xy[idx].y); // 创建开始点
ctx.lineTo(xy[idx].x+angleLine+width,xy[idx].y); // 创建水平线
ctx.arcTo(xy[idx].x+angleLine*2+width,xy[idx].y,xy[idx].x+angleLine*2+width,xy[idx].y+angleLine,radius); // 创建弧
ctx.lineTo(xy[idx].x+angleLine+width+angleLine,xy[idx].y+angleLine+width); // 创建垂直线
ctx.arcTo(xy[idx].x+angleLine*2+width,xy[idx].y+angleLine*2+width,xy[idx].x+angleLine+width,xy[idx].y+angleLine*2+width,radius); // 创建弧
ctx.lineTo(xy[idx].x+angleLine,xy[idx].y+angleLine*2+width); // 创建水平线
ctx.arcTo(xy[idx].x,xy[idx].y+angleLine*2+width,xy[idx].x,xy[idx].y+angleLine+width,radius); // 创建弧
ctx.lineTo(xy[idx].x,xy[idx].y+angleLine); // 创建垂直线
ctx.arcTo(xy[idx].x,xy[idx].y,xy[idx].x+angleLine,xy[idx].y,radius); // 创建弧
ctx.stroke(); // 这个具体干什么用的？
ctx.clip();
ctx.drawImage(e, xy[idx].x, xy[idx].y,180*rate,180*rate);
ctx.restore();
})
ctx.draw()
setTimeout(()=>{
let rate = 2
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 345,
height: 515,
destWidth: 345*rate,
destHeight: 515*rate,
canvasId: 'myCanvas',
success: function (res) {
that.setData({
shareImg: res.tempFilePath
})
wx.hideLoading()
console.log('绘图成功')
},
fail: function () {
// 导出图片错误
/*wx.showModal({
title: '导出图片时出错',
content: '请重新尝试！',
})*/
},
complete: function () {
wx.hideLoading()
}
},that)
},1000)
}
},
fail(e){
console.log('失败')
console.log(e)
}
})
}
}
})
}
})
}
export default drawShareImg
image.png
网友评论