如何使用CSS3对鱼眼全景图进行去畸变处理？

Question

4

我觉得现在是时候将我的Flash全景照片转换为js/html5/css3了。我看到了一些使用单独的平面图像的优雅解决方案，但是我的全景照片都是鱼眼镜头拍摄的...

我的直觉告诉我可以使用-webkit-transform: matrix3d来完成，但我还没有完全掌握它。

有没有想法这是否可以在css3中实现？

非常感谢。

- jackreichert

你能给我们展示一下你想要做什么的例子吗？ - Zoltan Lengyel

基本上，我有一个全景图像被压扁成鱼眼图像（当它被扭曲成底部被压缩而顶部被拉伸时，我相信这就是所谓的鱼眼效果），我想使用CSS3对图像进行去斜校正，使其成为一个360度全景图像，围绕着访问者的视点。 - jackreichert

2个回答

1

我发现了three.js。

看起来很有前途。

- jackreichert

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aaaaaaaaaaaa · Accepted Answer

可以做到，但最好了解您的数学知识。请注意，您不是使用CSS3而是专有扩展，这仅适用于Webkit浏览器。您可能最好使用Canvas元素完成此工作，它不仅受到更多浏览器的支持，而且还可以让您自由地进行任何所需的转换。

编辑：
那么，将图像切成许多细长的垂直切片，每个切片应按大约1/cos([偏离中心角度])缩放，并倾斜以考虑切片右侧和左侧的角度不同。这样，您应该得到一个“反鱼眼”形状，其中图像的顶部和底部是凹形的，您可能需要将其切成正方形。