V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
nihaojob
V2EX  ›  推广

没想到学会这个 canvas 库,竟然做这么多项目

  •  1
     
  •   nihaojob · 2 天前 · 3391 次点击

    大家好,我是一名前端工程师,也是开源图片编辑器vue-fabric-editor项目的作者,2024 年 5 月从北京辞职,我便开始了自己的轻创业之路,接触了不同的客户和业务场景,回顾这半年,没想到学会fabric.js这个Canvas库,竟能做这么多项目。

    如果你打算学习一个Canvas库或者做图片设计、定制设计相关的工具,我建议你学习一下fabric.js 这个库,它非常强大,可以做出很多有意思的项目,希望我的项目经历能给你的技术选型做一些参考

    1 预览图.png

    项目经历

    从北京回老家邯郸后,我陆续做了很多项目,包括证件照设计、锦旗/铭牌定制工具、Shopify 定制插件、批量生成图片、手机版图片设计工具、服装设计、电商工具等,这些项目都离不开fabric.js这个库。回顾这段经历,让我深刻体会到它的强大和广泛应用

    图片设计

    图片设计是我接触的第一个主要应用领域。项目最初源于一个小红书成语卡片设计工具的构想,随后逐步扩展到更广泛的设计场景,包括小红书封面、公众号头图、营销海报以及电商图片等多种自媒体内容制作。

    这类应用的核心功能在于自定义画布尺寸和元素排版,得益于 fabric.js 的原生支持,实现起来相对简单。我们主要工作是开发直观的属性编辑面板,使用户能够便捷地调整所选元素的文字和图片属性。

    当然如果做的完善一些,还需要历史记录标尺辅助线对齐快捷键等,这些功能fabric.js并没有包含,需要我们自己实现,这些功能可以参考 vue-fabric-editor 项目,它已经实现了这些功能。

    还有很多细节的功能,比如组合保存、字体特效、图层拖拽、图片滤镜等,这些功能我们做的比较完善了。

    ![2 功能展示.gif]( https://pro.kuaitu.cc/assets/v2/2 功能展示.gif)

    定制设计工具

    图片设计的场景相对通用,没有太多定制化的需求。而定制类的设计工具则需要针对特定场景深度开发,比如证件照、锦旗/铭牌设计、相册设计等,每个场景有不同的定制功能

    证件照设计工具的核心在于自动化的处理。主要工作量集中在尺寸的匹配,确保图片能自动调整到最佳大小。同时,需要提供人物图片的裁剪功能,让用户能便捷地进行换装、切换证件尺寸、更换背景等操作。

    证件照源码

    证件照设计

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

    开源锦旗定制工具

    铭牌定制设计工具

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

    ![相册裁剪]( https://pro.kuaitu.cc/assets/v2/7 相册功能.gif)

    电商工具

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

    ![电商去水印]( https://pro.kuaitu.cc/assets/v2/8 涂抹.gif)

    图片尺寸裁剪

    批量生成

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

    电商图片批量套模板

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

    批量条形码二维码

    这种项目主要的工作量在交互上,如何将画布中的文字和图片元素与表格中的数据一一对应,并批量生成,另外会有一些细节,比如条形码的尺寸、图片的尺寸如何与画布中的尺寸比例进行匹配,这些细节需要我们自己实现。

    上边的方式是通过表格来批量生成图片,还有一种是根据 API 来批量生成图片,很多场景其实没有编辑页面,只希望能够通过一个 API ,传入模板和数据,直接生成图片,fabric.js 支持在 nodejs 中使用,我们要做的就是根据模板和数据拼接 JSON ,然后通过 fabric.js 在后端生成图片,然后返回给前端,性能很好,实际测试 2 核 2G 的机器,每张图片在 100ms 左右。

    很多营销内容和知识卡片、证书、奖状也可以通过批量生成图片 API 来实现。

    批量生成图片 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 吧:https://github.com/ikuaitu/vue-fabric-editor 😄。

    34 条回复    2025-01-15 16:11:14 +08:00
    skallz
        1
    skallz  
       2 天前
    之前也在某些公司做过类似的产品,共勉,哈哈,这种东西算是烂大街了,太多了,但是反而还有不少还可以继续做的,因为这类图片工具有一个矛盾的地方,就是设计的越通用越难用,配置项过多,太抽象,理解和使用成本过高,越垂直越好用,但是定制化过多,其实还蛮适合垂直类小项目的
    skallz
        2
    skallz  
       2 天前
    之前也做过视频类生成项目,也是类似的困境,定制化太强,太耗人力,反而很适合做定制化小项目
    nihaojob
        3
    nihaojob  
    OP
       2 天前
    @skallz 谢谢 一起共勉,我们的产品是一个基础版本,就是提供给客户作为一个基础版本,让客户进行简单的删减和修改后,完成自己的在线设计工具。
    nihaojob
        4
    nihaojob  
    OP
       2 天前
    @skallz 嗯呢 确实 很多不同的场景,定制的功能投入的人力和时间都很大
    corcre
        5
    corcre  
       2 天前
    @nihaojob 4# 但是定制功能才能赚钱🐶
    lambdaq
        6
    lambdaq  
       2 天前
    好奇,这玩意有市场么?有人付费么?
    qwertyzzz
        7
    qwertyzzz  
       2 天前
    为什么我用 fabric.js 遇到了好多坑啊 ,明明设置了围绕中心旋转可就是还是围绕左上角顶点旋转这种。
    qwertyzzz
        8
    qwertyzzz  
       2 天前
    我有一个问题 这种有素材吗 我设计了一堆元素 保存为图片 后续 我想修改这个图片上的东西咋办 ,如果能有最基础的元素 那我很好修改,但是后面是图片难道要用橡皮擦
    nihaojob
        9
    nihaojob  
    OP
       2 天前
    @corcre 我们就是给客户定制,但是不算赚钱,只能说是辛苦钱,不过自己干的很起劲,希望把这些工具做好 哈哈
    nihaojob
        10
    nihaojob  
    OP
       2 天前
    @lambdaq 没市场,烂大街的产品了,就是给客户定制,帮客户做垂直类的设计工具解决方案,慢慢积累经验
    nihaojob
        11
    nihaojob  
    OP
       2 天前
    @qwertyzzz 不同产品到定位不同的,比如稿定和创客贴的产品,不需要特别强的设计能力,专业设计是都是用 PS ,这类工具就是给运营和个人用的,轻松的替换和修改一下文字就能完成运营需要的设计图片或者内容图片,另一类是原型设计工具 比如墨刀这些,整个界面风格是不一样的。
    skallz
        12
    skallz  
       2 天前   ❤️ 1
    @lambdaq 有一个行业对图片和视频生成是刚需,就是广告行业,针对不同平台需要不同的物料,需要大量的素材生成茫茫多的物料,光靠人力几乎不可能完成,几乎必须要有内部生成平台,不过不同的广告公司做法不一样
    nihaojob
        13
    nihaojob  
    OP
       2 天前
    @skallz 我们倒是有根据模板和内容来批量生成图片的 API ,但是具体场景不太清楚 可以讲讲吗?
    qwertyzzz
        14
    qwertyzzz  
       2 天前
    @nihaojob #11 对 比如我现在设计了一款 导出了 然后我后续感觉哪个文字不对 我是不是还得重新设计;另外打开 403 了
    momocraft
        15
    momocraft  
       2 天前
    设计包装的 3d 渲染也是 fabric.js 吗?
    nihaojob
        16
    nihaojob  
    OP
       2 天前
    @qwertyzzz 你是说操作吗? 还是什么?用户注册后 设计作品是可以报错的
    nihaojob
        17
    nihaojob  
    OP
       2 天前   ❤️ 1
    @momocraft fabric.js 这做平面,把设计好的平面贴图到 3D
    qwertyzzz
        18
    qwertyzzz  
       2 天前
    @nihaojob #16 哦哦 可能因为我没注册使用; 是打开网站 403 "https://www.kuaitu.cc/"
    fyxtc
        19
    fyxtc  
       2 天前
    国内的在线 ui 设计,稿定的市场份额有多少,现在个人导出都加水印了,去年还没有。
    lcbp
        20
    lcbp  
       2 天前
    fabric.js 在大改,建议入 konva.js
    nihaojob
        21
    nihaojob  
    OP
       2 天前
    @qwertyzzz 真的是奇怪,不知道是服务的问题 还是 CDN 的问题,偶尔就有人反馈
    nihaojob
        22
    nihaojob  
    OP
       2 天前
    @lcbp konva.js 也很优秀 年头也比较久了 可以入手 哈哈
    qqjt
        23
    qqjt  
       2 天前
    哎呦不错哦
    nihaojob
        24
    nihaojob  
    OP
       2 天前
    @qqjt 感谢支持呦
    kjcm150
        25
    kjcm150  
       2 天前
    @nihaojob 可能是 CDN 防盗链导致的
    skallz
        26
    skallz  
       2 天前
    @nihaojob 拿视频举个例子,pc 端是横屏,有种广告类型是两个人在画面的一左一右对讲,但是这种没办法直接投放到移动端上,因为手机是竖屏,横屏的视频在竖屏太小了,那竖屏的视频想复用素材可能采用的办法就是先左边的人在画面中心讲完话然后换成右边的人在画面中心,这样想制作这种类型的广告视频就只需要有限的几种素材就可以成规模的自动制作投放到不同平台(这只是举了一个非常简单的例子,实际上还涉及到很多平台标签之类的,很复杂)
    max1024
        27
    max1024  
       2 天前
    收藏了,弈可赛艇
    max1024
        28
    max1024  
       2 天前
    下载后,运行起来报错。
    ChoateYao
        29
    ChoateYao  
       2 天前
    这是要跟 canva 抢市场?作为独立开发,canva 让我解决很多 P 图的问题,比起 PS 更简单好用,希望 up 主能够借鉴下。
    manning
        30
    manning  
       2 天前
    以前有个印刷公司设计工具的项目
    参考这个的,https://www.duoduoyin.com/
    nihaojob
        31
    nihaojob  
    OP
       2 天前
    @ChoateYao 这倒不是哈,我们主要是给企业服务,提供私有化部署和技术开发对接的工作,服务一些中小团队。canva 太大了,他们不愿意给小团队服务的。
    nihaojob
        32
    nihaojob  
    OP
       2 天前
    @manning 嗯嗯 看起来很类似,我们也在参考 指纹科技、包小盒的产品。
    mohuani
        33
    mohuani  
       2 天前
    @nihaojob 我挂着日本节点的梯子,也 403 了。关了梯子就正常了
    nihaojob
        34
    nihaojob  
    OP
       2 天前
    @mohuani 原来还有这个限制呢 又学习到了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1094 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:30 · PVG 07:30 · LAX 15:30 · JFK 18:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.