[实战项目] 拒交 49 元/月会员费，我用 Canvas + 原生 JS 撸了个“智能排版”主图神器 (附思路)

独立开发者分享自研淘宝主图制作工具的"踩坑"经验，重点介绍两大核心技术：1）智能统一宽度算法，通过动态计算文本最大宽度实现胶囊按钮自适应；2）分组居中方案，采用固定间距与智能缩放确保排版美观。工具提供永久版付费模式（199元），对比49元/月的商业设计工具更实惠。作者在CSDN发起互动活动，将抽取10位用户赠送价值99元的年卡福利，邀请开发者交流技术实现与使用反馈。

a6288a

605人浏览 · 2025-11-04 21:29:19

a6288a · 2025-11-04 21:29:19 发布

核心技术实现（踩坑分享）

1. 功能特点的“智能统一宽度”

2. “分组居中”与“智能缩放” (最核心)

商业模式与福利

大家好，我是一名（苦逼的）独立开发者。

平时喜欢写点小工具（Side Project）挂淘宝卖，但每次上架做主图都让我崩溃。

相信很多技术同行都有同感：

稿定/Canva 这类工具： 模板是多，但一个月会员 49 块。我这种低频上新的人，为了做 1 张图开一个月会员，血亏。
AI 生成： 今年 AI 很火，我试了，结果全是“废图”。AI 根本不懂淘宝要的“大字报”排版，连文字对齐都做不到，浪费时间。
PS： （程序员的电脑里可以没有 PS...）太重了。

作为开发者，最后的倔强就是：不就是 Canvas 画布嘛，我自己写一个！

于是，我肝了几个周末，这个小工具诞生了： 体验链接： http://toutu.1da.top/index.php (PC端)

核心技术实现（踩坑分享）

这个工具界面是三栏布局（左选模板/右填属性/中预览），核心就是 Canvas API。看着简单，但要让排版“智能”，还是踩了不少坑。

这里分享一下我最核心的两个排版算法思路（V17版）：

1. 功能特点的“智能统一宽度”

需求： 无论用户输入“四个字”还是“八个字”，所有功能点胶囊必须一样宽，且要左右居中。

思路：

先用 ctx.font 设置好字体（我用了"500 80px OppoSans M"）。
用 ctx.measureText(text) 遍历所有 features 数组。
const maxTextWidth = Math.max(0, ...features.map(f => ctx.measureText(f).width)); 拿到最长的文字宽度。
let boxWidth = maxTextWidth + (fontSize * 2); (我把左右留白 padding 设为字体大小，这样留白也能动态缩放)。
boxWidth = Math.min(boxWidth, availableWidth); (防止溢出)。
const boxStartX = startX + (availableWidth - boxWidth) / 2; (计算出居中绘制的 X 坐标)。

2. “分组居中”与“智能缩放” (最核心)

需求： 3 条功能点时，不能像 V14 那样被拉伸撑满（上下太空），也不能像 V13 那样挤在中间。要保持固定间距，然后“整个组”居中。

思路：

智能缩放： 先用 80px 字体算一次 defaultMaxTextWidth，如果它小于容器宽度的 60% 且条目数 <= 3，就判定为“短文本”，把 fontSize 提升到 100px，featureHeight 也相应提升。
固定间距： 无论如何，我都设置一个固定的 fixedGap = 60px。
计算组高度： const totalBlockHeight = (numFeatures * featureHeight) + (Math.max(0, numFeatures - 1) * fixedGap);
计算组的起始 Y： const blockStartY = startY + Math.max(0, (availableHeight - totalBlockHeight) / 2);
绘制： 循环时，每个 currentFeatureY = blockStartY + index * (featureHeight + fixedGap);