受不了49块/月的会员费和 AI 废图，我撸了个“虚拟产品”电商主图神器 (文末送码)

大家好，我是大骏。目前是一个独立开发者。平时喜欢折腾各种小产品 (Side Project)，然后挂到网上卖。

开发产品本身是种乐趣，但每次上架前的“设计环节”都让我痛苦不堪。

一、痛点：为什么我非要自己造轮子？

和大家一样，我首先想到的也是用现成工具：

1. PS/Figma？ 太重了。我只想改个字、换个图，真的不想打开 PS 去对齐像素。
2. 稿定/Canva？ 模板很多，但问题是太贵了！一个月会员要 49 块（稿定）。我这种低频上新、一个月才卖几十块的小工具，实在不想被SaaS平台“绑架”。
3. AI 生成？ （别提了，这个坑我踩得最深）我花了大量时间研究提示词、把即梦的灵感发现页都刷到底了，想让AI帮我生成“淘宝主图”。结果呢？要么是布局一言难尽，要么就是风格诡异。AI根本不懂淘宝卖家要的“大字报”是什么样！纯纯浪费时间，全是废图。

作为开发者，最后的倔强就是： “算了，求人不如求己，我自己写一个！”

我想要的很简单：

• 傻瓜式： 别让我拖拽，我就想填个表单。
• 智能化： 别让我对齐，排版必须自动“好看”。
• 专业化： 必须用阿里普惠体、OPPO Sans 这种免费商用字体。
• 便宜！

于是，我肝了几个周末，这个小工具诞生了：

体验链接： http://toutu.1da.top/index.php (PC端体验最佳)

二、产品展示 (三栏布局)

为了交互简单，我用了经典的三栏布局：

• 左栏（全局）： 选模板、选背景。
• 右栏（属性）： 填文字、传 Logo 和产品图。
• 中栏（预览）： 实时预览，所见即所得。

三、技术实现（踩坑分享）

这个工具看着简单，但核心的“智能排版”还是踩了不少坑。前端技术栈是原生 JS + HTML/CSS，核心绘图用的就是 Canvas API。

分享两个我最得意的（也是最头疼的）功能点：

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

我希望用户的功能点（比如3条）能自动对齐。

• 逻辑： 在绘制前，用 ctx.measureText(text) 遍历所有功能点，找到 maxTextWidth。
• 实现： 最终所有胶囊的宽度 boxWidth = maxTextWidth + (fontSize * 2)，这样左右留白（我设置成了字体大小的2倍）也能动态缩放，视觉更统一。

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

这是最难的。我不希望功能点“强制撑满”或“挤成一团”。

• 智能缩放：

  1. 先用默认字体（如 80px）计算最长文字宽度 defaultMaxTextWidth。
  2. 如果 defaultMaxTextWidth 小于容器宽度的 60%，并且条目数 <= 3，就判断为“短文本”。
  3. 触发放大，把字体 fontSize 提升到 100px，胶囊高度 featureHeight 也相应提升。

• 分组居中：

  1. 用最终的 featureHeight 和一个固定的间距（如 fixedGap = 60px）计算出功能点“组”的总高度 totalBlockHeight。
  2. 再计算这个“组”的垂直起始点 blockStartY = startY + (availableHeight - totalBlockHeight) / 2。
  3. 这样绘制出来的“组”就能作为一个整体，在可用空间内实现垂直居中，而不是被强行拉开。

四、商业模式 (透明公开)

这个工具我已经在淘宝上架了，毕竟服务器和域名都是成本（虽然不高）。 定价是：月卡 9.9，年卡 99，永久卡 199。

VIP主要是解锁所有模板+无限次下载+超高清下载。

永久卡主要是给和我一样的“早鸟”开发者朋友准备的，199买断，一劳永逸，再也不用被 49 块/月背刺了（笑）。

五、求助与福利

发帖主要是想给 掘金 社区的各位大佬“抛砖引玉”，求一波反馈（比如技术实现、新模板建议、商业模式等），求轻拍。

福利时间： 感谢大家花时间看我这个小项目！

评论区抽 10 位朋友，送【年卡】兑换码（价值99元）！

规则： 随便聊聊，比如：

• 你对这个工具有什么建议？
• 你做 Side Project 时有什么好玩的故事？
• 或者吐槽一下你用过的设计工具...

我会在 [11月05日] 晚上统一开奖，感谢大家支持！