使用JavaScript處理圖像的過濾器

Question

如果您查看Google街景視圖圖像，圖像會從中心向邊緣徑向變形，從而給人更逼真的印象。

我想用JavaScript實現類似的效果。

那麼是否有任何圖像處理腳本/庫/算法來提供這種特定的效果？

Answer 1

我知道的貨架上沒有東西。還有一堆的方式，你可以處理這個問題，但他們都不是很直接：

在努力爲了/逼真這樣做：

• 使用純CSS和JS，舒展的側面從中心開始的圖像。作爲一個例子，單獨留下中間10％。拉伸下一個9％到10％的寬度。接下來的8％到10％的寬度，然後是7％到10％等...如果使用JS，使用畫布，如果使用CSS，你需要噸的DIVS與偏移背景位置（谷歌「CSS可樂罐」爲基本前提）
• 使用類似Three.js的東西，創建一個3D環境，並簡單地將圖像作爲背景 - 您將在WebGL中獲得免費的失真。
• 使用CSS3，將圖像分解成一堆切片，並將它們放置在圓柱形視圖中的「攝像機」周圍。你會得到「免費」的邊緣失真，但只有在現代瀏覽器中（我已經完成了這項工作，效果很好）。