大家好，我是一名前端工程师，也是开源图片编辑器vue-fabric-editor项目的作者，2024 年 5 月从北京辞职，我便开始了自己的轻创业之路，接触了不同的客户和业务场景，回顾这半年，没想到学会fabric.js这个Canvas库，竟能做这么多项目。
如果你打算学习一个Canvas库或者做图片设计、定制设计相关的工具，我建议你学习一下fabric.js 这个库，它非常强大，可以做出很多有意思的项目，希望我的项目经历能给你的技术选型做一些参考。

开源项目：vue-fabric-editor
预览： www.kuaitu.cc

项目经历
从北京回老家邯郸后，我陆续做了很多项目，包括证件照设计、锦旗/铭牌定制工具、Shopify 定制插件、批量生成图片、手机版图片设计工具、服装设计、电商工具等，这些项目都离不开fabric.js这个库。回顾这段经历，让我深刻体会到它的强大和广泛应用。
图片设计
图片设计是我接触的第一个主要应用领域。项目最初源于一个小红书成语卡片设计工具的构想，随后逐步扩展到更广泛的设计场景，包括小红书封面、公众号头图、营销海报以及电商图片等多种自媒体内容制作。
这类应用的核心功能在于自定义画布尺寸和元素排版，得益于 fabric.js 的原生支持，实现起来相对简单。我们主要工作是开发直观的属性编辑面板，使用户能够便捷地调整所选元素的文字和图片属性。
当然如果做的完善一些，还需要历史记录、标尺、辅助线对齐、快捷键等，这些功能fabric.js并没有包含，需要我们自己实现，这些功能可以参考 vue-fabric-editor 项目，它已经实现了这些功能。
还有很多细节的功能，比如组合保存、字体特效、图层拖拽、图片滤镜等，这些功能我们做的比较完善了。

定制设计工具
图片设计的场景相对通用，没有太多定制化的需求。而定制类的设计工具则需要针对特定场景深度开发，比如证件照、锦旗/铭牌设计、相册设计等，每个场景有不同的定制功能。
证件照设计工具的核心在于自动化的处理。主要工作量集中在尺寸的匹配，确保图片能自动调整到最佳大小。同时，需要提供人物图片的裁剪功能，让用户能便捷地进行换装、切换证件尺寸、更换背景等操作。

锦旗与铭牌设计则更注重文字内容的自动排版。系统需要根据用户输入的抬头、落款、赠言等内容，自动计算最优的文字间距和整体布局，确保作品的美观性。特别是铭牌设计，还需要实现曲线文字功能，让文字能够优雅地沿着弧形排布。

相册设计工具的重点是提供灵活的画布裁剪功能。用户可以使用各种预设的形状模板来裁剪图片，需要确保裁剪后的图片既美观又协调，最终生成精美的画册作品，交互上方便用户拖拽图片快速放入裁剪区域。

电商工具
电商场景比图片设计更垂直，除了普通的平面设计，例如店铺装修、商品主图、详情图的设计，另外还需要对商品进行换尺寸、抠图、换背景、去水印、涂抹消除、超清放大等操作，这些对图片处理的要求更高一些。

批量生成
批量算是一个比较刚需的功能，比如电商的主图，很多需要根据不同产品到图片和价格来批量加边框和文字，以及节庆价格折扣等，来生成商品主图，结合图片和表格可以快速生成，减少设计师的重复工作量。

另一部分是偏打印的场景，比如批量制作一些商品的二维码条形码，用在超市价签、电子价签、一物一码、服装标签等场景，根据数据表格来批量生成。

这种项目主要的工作量在交互上，如何将画布中的文字和图片元素与表格中的数据一一对应，并批量生成，另外会有一些细节，比如条形码的尺寸、图片的尺寸如何与画布中的尺寸比例进行匹配，这些细节需要我们自己实现。
上边的方式是通过表格来批量生成图片，还有一种是根据 API 来批量生成图片，很多场景其实没有编辑页面，只希望能够通过一个 API ，传入模板和数据，直接生成图片，fabric.js 支持在 nodejs 中使用，我们要做的就是根据模板和数据拼接 JSON ，然后通过 fabric.js 在后端生成图片，然后返回给前端，性能很好，实际测试 2 核 2G 的机器，每张图片在 100ms 左右。
很多营销内容和知识卡片、证书、奖状也可以通过批量生成图片 API 来实现。

当然，还有一些更复杂的场景，比如不同的数据匹配不同的模板，不同的组件展示不同的形式等，包括错别字检测、翻译等，我们也为客户做了很多定制化的匹配规则。

服装/商品定制
服装/商品定制是让用户在设计平台上上传图片，然后将图片贴图到对应的商品模板上，实现让用户快速预览设计效果的需求。
这种场景一般会分为 2 类，一类是是针对 C 端用户，需要的是简单、直观，能够让用户上传一张图片，简单调整一下位置就能确认效果快速下单。

我在这篇文章里做了详细介绍：《 fabric.js 实现服装/商品定制预览效果》。
另一类是针对小 B 端的用户，他们对设计细节有更高的要求，比如领子、口袋、袖子等，不同的位置进行不同的元素贴图，最后将这些元素组合成一个完整的服装效果图，最后需要生成预览图片，在电商平台售卖，完成设计后，还要将不同区域的图片进行存储，提供给生产厂家，厂家快速进行生产。
比如抱枕、手机壳、T 恤、卫衣、帽子、鞋子、包包等，都可以通过类似服装设计的功能来实现。

很多开发者会提出疑问，是否需要介入 3D 的开发呢？
我们也和很多客户沟通过，从业务的角度看，他回答是：3D 的运营成本太高。他们做的都是小商品，SKU 很多很杂，如果每上一个商品就要进行 3D 建模，周期长并且成本高，他们更希望的是通过 2D 的图片来实现，而且 2D 完全能够满足让用户快速预览确认效果的需求，所以 2D 的服装设计工具就成为了他们的首选。
包装设计
包装设计是让用户在设计平台上，上传自己的图片，然后将图片贴图都包装模板上，主要的场景是生成定制场景，比如纸箱、纸袋、纸盒、纸杯、纸质包装等，这些场景需要根据不同的尺寸、形状、材质、颜色等进行定制化设计，最后生成预览图片。

因为设计到不同的形状和切面，而且大部分是大批量定制生产，所以对细节比较谨慎，另外包装规格相对比较固定，所有用 3D 模型来实现就比较符合。
另外，在确定设计效果后，需要导出刀版图，提供给生产厂家，厂家根据刀版图进行生产，所以需要将设计图导出为刀版图，这个功能 fabric.js 也支持，可以导出为 SVG 格式直接生产使用。

AI 结合
在 AI 大火的阶段，就不得不提 AI 的场景了，无论在自媒体内容、电商、商品、服装设计的场景，都有 AI 介入的影子，举个例子，通过 AI 生成内容来批量生成营销内容图片，通过 AI 来对电商图片进行换背景和图片翻译，通过 AI 生成印花图案来制作服装，通过 AI 来生成纹理图来生成纸盒包装，太多太多的 AI 的应用场景，也是客户真金白银定制开发的功能。
展望 2025
从图片设计的场景来看，我们的产品已经很成熟了，也算是主力产品了，未来会持续迭代和优化，让体验更好，功能更强大，把细节做的更完善，例如支持打印、视频生成等功能。
从定制设计工具的场景来看，我们积累了不同商品定制设计的经验，从技术和产品到角度看，我们还可以抽象出更好的解决方案，让客户能够更高效、低成本的接入，提供给他们的客户使用，快速实现设计生产的打通。
2024 到 2025 ，从在家办公一个人轻创业，搬到了我们的办公室，期待未来越来创造更多价值。

总结
半年的时间，这些项目的需求fabric.js都帮我们实现了，所以如果你对Canvas感兴趣，我的亲身经历告诉你，学习fabric.js是一个不错的选择。
另外，对我来说更重要的是，客户教会了我们很多业务知识，这些才是宝贵的业务知识和行业经验，一定要心存敬畏，保持空杯，只有这样我们才能做好在线设计工具解决方案。
这篇文章也算是我从 2024 年离职出来到现在的一个年终总结了，希望我们踩过的坑和积累的经验都变成有价值的服务，作为基石在 2025 年服务更多客户，文章内容供大家一些参考，期待你的批评指正，一起成长，祝大家 2025 年大展宏图。
给我们的开源项目一个 Star 吧： github.com/ikuaitu/vue-fabric-editor 😄。

之前也在某些公司做过类似的产品，共勉，哈哈，这种东西算是烂大街了，太多了，但是反而还有不少还可以继续做的，因为这类图片工具有一个矛盾的地方，就是设计的越通用越难用，配置项过多，太抽象，理解和使用成本过高，越垂直越好用，但是定制化过多，其实还蛮适合垂直类小项目的

之前也做过视频类生成项目，也是类似的困境，定制化太强，太耗人力，反而很适合做定制化小项目

谢谢 一起共勉，我们的产品是一个基础版本，就是提供给客户作为一个基础版本，让客户进行简单的删减和修改后，完成自己的在线设计工具。

嗯呢 确实 很多不同的场景，定制的功能投入的人力和时间都很大

4＃ 但是定制功能才能赚钱🐶

好奇，这玩意有市场么？有人付费么？

为什么我用 fabric.js 遇到了好多坑啊 ，明明设置了围绕中心旋转可就是还是围绕左上角顶点旋转这种。

我有一个问题 这种有素材吗 我设计了一堆元素 保存为图片 后续 我想修改这个图片上的东西咋办 ，如果能有最基础的元素 那我很好修改，但是后面是图片难道要用橡皮擦

我们就是给客户定制，但是不算赚钱，只能说是辛苦钱，不过自己干的很起劲，希望把这些工具做好 哈哈

没市场，烂大街的产品了，就是给客户定制，帮客户做垂直类的设计工具解决方案，慢慢积累经验

不同产品到定位不同的，比如稿定和创客贴的产品，不需要特别强的设计能力，专业设计是都是用 PS ，这类工具就是给运营和个人用的，轻松的替换和修改一下文字就能完成运营需要的设计图片或者内容图片，另一类是原型设计工具 比如墨刀这些，整个界面风格是不一样的。

有一个行业对图片和视频生成是刚需，就是广告行业，针对不同平台需要不同的物料，需要大量的素材生成茫茫多的物料，光靠人力几乎不可能完成，几乎必须要有内部生成平台，不过不同的广告公司做法不一样

我们倒是有根据模板和内容来批量生成图片的 API ，但是具体场景不太清楚 可以讲讲吗？

＃11 对 比如我现在设计了一款 导出了 然后我后续感觉哪个文字不对 我是不是还得重新设计；另外打开 403 了

设计包装的 3d 渲染也是 fabric.js 吗？

你是说操作吗？ 还是什么？用户注册后 设计作品是可以报错的

fabric.js 这做平面，把设计好的平面贴图到 3D

＃16 哦哦 可能因为我没注册使用； 是打开网站 403 " www.kuaitu.cc/"

国内的在线 ui 设计，稿定的市场份额有多少，现在个人导出都加水印了，去年还没有。

fabric.js 在大改，建议入 konva.js

真的是奇怪，不知道是服务的问题 还是 CDN 的问题，偶尔就有人反馈

konva.js 也很优秀 年头也比较久了 可以入手 哈哈

哎呦不错哦

感谢支持呦