html5 处理图片问题，如何 [扭曲] 一个图片？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2555 天前的主题，其中的信息可能已经有所发展或是发生改变。

求助大佬，要实现一个产品展示的功能，假如原始图片如图所示：

现在给一张图片过来，怎么把图片做成包围杯子的效果？如图所示

9 条回复 • 2017-12-29 22:49:21 +08:00

Aoang

2017-12-29 00:01:17 +08:00 via Android

…这是扭曲？………

css 图层叠加应该可以做到。
js 也行。
html 做不到，起码 html5 不行。甚至，html10 也不行…

tanranran

2017-12-29 00:05:30 +08:00

@Aoang 谢谢大佬回复,css 图层叠加可以做到,但是杯子的边缘不好处理啊,目前想到的解决方案是 three.js,但是学习成本太高...所以,想到 V2 咨询下大佬们的意见.

dixeran

2017-12-29 00:14:01 +08:00 via Android

webgl 这个方向吧，css 能扭曲的样式不多

WildCat

2017-12-29 00:18:32 +08:00 via iPhone

实在不行 web assembly 😅

tanranran

2017-12-29 00:34:13 +08:00

@WildCat web assembly,太高端了,感觉最靠谱的还是 three.js

tanranran

2017-12-29 00:34:37 +08:00

@dixeran 是的,目前来看 webgl 感觉最合适了.three.js

MinonHeart

2017-12-29 12:05:45 +08:00

这个还是 PS 生成两个图层实在

MinonHeart

2017-12-29 12:07:07 +08:00

用 webgl 底图要是渲染出来的模型可以，一张图的话估计不行

tanranran

2017-12-29 22:49:21 +08:00

@MinonHeart 两个图层是一定的