javascript - 使用 JavaScript 进行图像处理过滤器

Question

如果您查看 Google 街景图像，该图像会从中心向边缘呈放射状扭曲，从而给人一种更真实的印象。

我想使用 JavaScript 实现类似的效果。

那么有没有任何图像处理脚本/库/算法可以提供这种特定的效果？

Answer 1

据我所知，没有任何现成的东西。有很多方法可以处理这个问题，但没有一个是非常直接的:

按照努力/实际执行此操作的顺序:

• 使用纯 CSS 或 JS，从中心开始拉伸(stretch)图像的两侧。例如，保留中间的 10%。拉伸(stretch)接下来 9% 到 10% 的宽度。接下来的 8% 到 10% 宽度，然后 7% 到 10% 等等...如果使用 JS，请使用 Canvas ，如果使用 CSS，则需要大量具有偏移背景位置的 DIVS(谷歌“CSS Coke Can”作为基本前提)
• 使用 Three.js 之类的工具创建 3D 环境并简单地将图像作为背景 - 您将在 WebGL 中获得无失真效果。
• 使用CSS3，将图像分成一堆切片，并将它们放置在圆柱形 View 中的“相机”周围。您将“免费”获得边缘扭曲，但仅限于现代浏览器(我已经这样做了，效果很好)。