用小程序的Canvas给客户的商品绘制长图海报 |

给客户倒腾了个新功能呃也不算新功能了吧之前很早也给客户做过就是初始需求不太一样今天这个客户的需求是每天上架的新商品需要生成一个长图海报客户可以分享到朋友圈或者发到群里给自己的用户们看到因为每天上线出售的商品不一样如果没有这样一个长图海报就需要每天自己辛苦截图或者其他办法来告知用户今天有些什么产品在卖这样莫名增加了很多无用的劳动而且明显的有点傻...😃

研究了下小程序这边还是准备用Canvas 新开一个画布先请求获取一下客户今天上线的商品然后把商品的图片标题价格作为数据源让Canvas进行绘制一行2个商品一行一行的往下绘制绘制完之后在头部增加今日出售商品底部增加小程序的码长图海报生成之后用户可以长按识别进入小程序直接购买客户每天就拿长图发个朋友圈或者在群里发下长图海报就ok 一个海报生成按钮就把之前的无用操作给省略了不过测试了下如果商品多的时候绘制的过程耗时会稍微有点长而且看下来好像和跑小程序的手机有一定影响手机强一些的话绘制过程会短一点

需求说完啦贴一下代码界面这边做了个image标签装载绘制好了的长图海报

js文件有点多

async generatePoster() { const products = this.data.goodsOnSaleArr; // 1. 计算画布尺寸 const screenWidth = wx.getSystemInfoSync().screenWidth; const canvasWidth = screenWidth; // 2倍图清晰 const padding = 20 * 2; // 内边距 const columnCount = 2; // 两列 const columnGap = 10 * 2; const rowGap = 15 * 2; // 商品卡片尺寸 const cardWidth = (canvasWidth - padding * 2 - columnGap) / columnCount; const imageHeight = cardWidth * 1.2; // 图片高度 const titleHeight = 30; // 标题区域高度 const priceHeight = 30; // 价格区域高度 const cardHeight = imageHeight + titleHeight + priceHeight; // 计算行数和总高度 const rowCount = Math.ceil(products.length / columnCount); const canvasHeight = rowCount * (cardHeight + rowGap) + padding * 2; this.setData({ canvasWidth, canvasHeight }); // 2. 加载所有图片 const imagePromises = products.map(product => this.loadImage(product.t) ); const images = await Promise.all(imagePromises); // 3. 创建canvas上下文 const ctx = wx.createCanvasContext('posterCanvas'); // 4. 绘制背景 ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, canvasWidth, canvasHeight); // 5. 绘制商品列表 for (let i = 0; i < products.length; i++) { const product = products[i]; const image = images[i]; // 计算位置 const row = Math.floor(i / columnCount); const col = i % columnCount; const x = padding + col * (cardWidth + columnGap); const y = padding + row * (cardHeight + rowGap); // 绘制商品卡片背景 ctx.setFillStyle('#f8f8f8'); ctx.fillRect(x, y, cardWidth, cardHeight); // 绘制商品图片 if (image) { //ctx.drawImage(image, x, y, cardWidth, imageHeight); this.drawRoundImage(ctx, image, x, y, cardWidth, imageHeight, 8); } // 绘制商品标题（增加顶部间距） ctx.setFontSize(16); ctx.setFillStyle('#1e1e1e'); ctx.setTextAlign('left'); const title = this.ellipsis(product.title, 10); const titleLines = this.getTextLines(ctx, title, cardWidth - 10); // 标题顶部间距 10px（2倍图为20） const titleTopMargin = 12 * 2; // 新增：标题顶部间距 titleLines.forEach((line, index) => { ctx.fillText( line, x + 10, y + imageHeight + titleTopMargin + index * 24 // 修改这里 ); }); // 绘制价格 ctx.setFontSize(18); ctx.setFillStyle('#e93b3b'); ctx.fillText( `¥${product.price}`, x + 10, y + cardHeight - 10 ); } // 6. 绘制完成 ctx.draw(false, () => { // 导出为图片 wx.canvasToTempFilePath({ canvasId: 'posterCanvas', success: (res) => { const url = res.tempFilePath; console.log('保存到相册或预览', res) this.setData({ postUrl: url }) }, fail: (err) => { console.error('生成海报失败:', err); } }); }); }, // 多行文本处理 getTextLines(ctx, text, maxWidth) { const lines = []; let currentLine = ''; const words = text.split(''); for (let i = 0; i < words.length; i++) { const testLine = currentLine + words[i]; const metrics = ctx.measureText(testLine); if (metrics.width > maxWidth && i > 0) { lines.push(currentLine); currentLine = words[i]; } else { currentLine = testLine; } } if (currentLine) { lines.push(currentLine); } // 限制最多显示2行 if (lines.length > 2) { lines.length = 2; lines[1] = lines[1].substring(0, lines[1].length - 1) + '...'; } return lines; }, // 保存海报到相册 postImgSave(e) { var that = this, urlVal = that.data.postUrl; wx.saveImageToPhotosAlbum({ filePath: urlVal, success: () => { wx.showToast({ title: '保存成功' }); } }); },

差不多就是上面这些 css文件的话自己按照实际情况调整一下有个问题没解决好绘制的清晰度导出的长图海报清晰度总是不太满意

这几天新版本的开发工具没下载那个稳定版的总觉得有点不稳定的小问题不知道是不是我的问题后期调整好了再来补充一下这一期先这样

保持好奇不断进步下期见~