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

请帮忙看看这个用什么技术实现的

  •  
  •   zeyou · 2020-03-26 10:47:50 +08:00 · 2591 次点击
    这是一个创建于 1711 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在线定制衣服和杯子等商品,前端上传图片,后台生成合成图片,请问如何根据前端上传的图片来贴在衣服和杯子等商品的对应位置。比如前端传一张长方形的图片,贴在杯子表面,生成合成的图片给用户看,如何实现。

    19 条回复    2020-03-26 19:23:49 +08:00
    momocraft
        1
    momocraft  
       2020-03-26 10:52:39 +08:00
    opengl 或其封装 总之是计算机图形学
    fancy111
        2
    fancy111  
       2020-03-26 10:56:09 +08:00
    图像识别加图像合成。 算法相关。
    lower
        3
    lower  
       2020-03-26 11:08:12 +08:00
    web gl
    zeyou
        4
    zeyou  
    OP
       2020-03-26 11:18:51 +08:00
    我目前想法是通过 3D 模型,uv 贴图。应该有更简单的方式。
    paulee
        5
    paulee  
       2020-03-26 11:25:19 +08:00
    既然是在线定制,为何不直接让用户选择在哪里添加文字 /图片呢(这样就只是前端实现一下就好了)?如果只是想要体现「智能」,那还是老老实实研究图像识别吧...
    Mithril
        6
    Mithril  
       2020-03-26 11:29:30 +08:00
    简单的话
    衣服你展平了拍个正面,直接把图对应位置叠上去就好了。
    杯子的话如果不是想做个能交互旋转的 3D 杯子,基本也是拍个素色的杯子,然后把图变形了叠上去
    这就只是个简单的图像处理而已,用不着图形学。虽然原理都是一样数学吧,不过不用这么麻烦。
    zeyou
        7
    zeyou  
    OP
       2020-03-26 11:37:31 +08:00
    @paulee 你说的这些功能已经做了,问题是如何贴到对应的位置?
    zeyou
        8
    zeyou  
    OP
       2020-03-26 11:42:00 +08:00
    @Mithril 衣服有正面的,还有穿在身上的,还有挂着的。不同的杯子,弧度不一样,需要展示正面,两边的侧面给用户看。
    Mithril
        9
    Mithril  
       2020-03-26 11:45:14 +08:00
    只要角度是固定的基本都没问题。只是看着不太真实而已,不过作为展示一般都够了。
    你需要给不同角度的底图调好对应参数,拿到用户的图做个变换直接贴上去就完了。
    zeyou
        10
    zeyou  
    OP
       2020-03-26 12:00:27 +08:00
    @Mithril 有些图是模特穿身上拍的,这时候没办法调参数吧
    Mithril
        11
    Mithril  
       2020-03-26 12:03:02 +08:00
    @zeyou 褶皱啥的做不出来,不过做个大概效果也还是可以的。
    你不可能做出完美的试穿效果的。
    loading
        12
    loading  
       2020-03-26 12:24:11 +08:00 via Android
    既然可穷尽,那就是体力活了。
    coderluan
        13
    coderluan  
       2020-03-26 13:41:24 +08:00
    固定视角的,把图像分解了,然后不同部分别做 opencv 映射变换。自由旋转的,用 3D 模型贴图。这些都简单。困难的是需要图像真实的,比如必须需要真人模特,不能 3D 模特,这个就得用机器学习了,建议直接放弃,能做倒是能做,但是成本太高也就失去意义了。
    ironMan1995
        14
    ironMan1995  
       2020-03-26 13:45:59 +08:00 via Android
    能不能让前端用 canvas 合成图片再传给后端
    LucasW
        15
    LucasW  
       2020-03-26 13:50:01 +08:00
    最近在做类似的产品,分享下:
    LucasW
        16
    LucasW  
       2020-03-26 13:56:07 +08:00
    1 、放弃后端合成,这几年前端的图形处理能力远超后端;
    2 、如果是 2D 显示,可选方案有 Canvas 和 SVG,如果 3D 有 WebGL 或直接游戏引擎,现在的游戏引擎很在 Web 上已经很强大;
    3 、我的方案的是商品背景、几遍外部结构用 SVG,因为可以无损放大,从线上设计到后端制作可以做到随意生成对应大小。图案、文字直接用 Vue 写成 Html 结构,然后设计完成提交的时候 html2canvas 合成,嵌入到 SVG 中。
    paulee
        17
    paulee  
       2020-03-26 13:56:30 +08:00
    若是不能通过简单的位移加变换手动把图像 PS 上去的话;就只能 2D 转 3D,通过多图片去建立 3D 模型,难度就要高很多了
    lhx880619
        18
    lhx880619  
       2020-03-26 19:22:50 +08:00 via Android
    我做过定制被子生成 3d 的主要是贴图
    lhx880619
        19
    lhx880619  
       2020-03-26 19:23:49 +08:00 via Android
    webgl 算个 uv 的事儿 不算太难
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2727 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 07:35 · PVG 15:35 · LAX 23:35 · JFK 02:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.