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

V2EX = way to explore

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

For Existing Member Sign In

This topic created in 3046 days ago, the information mentioned may be changed or developed.

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

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

9 replies • 2017-12-29 22:49:21 +08:00

Aoang

Dec 29, 2017 via Android

…这是扭曲？………

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

ByteRan

Dec 29, 2017

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

dixeran

Dec 29, 2017 via Android

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

WildCat

Dec 29, 2017 via iPhone

实在不行 web assembly 😅

ByteRan

Dec 29, 2017

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

ByteRan

Dec 29, 2017

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

MinonHeart

Dec 29, 2017

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

MinonHeart

Dec 29, 2017

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

ByteRan

Dec 29, 2017

@MinonHeart 两个图层是一定的