фильтр обработки изображений с JavaScript

Question

Если вы посмотрите на изображение Google Street View, изображение будет радиально искажено от центра к краям, что создает более реалистичное впечатление.

Я хочу добиться аналогичного эффекта с помощью JavaScript.

Так есть ли какой-нибудь скрипт / библиотека / алгоритм обработки изображений, обеспечивающий этот специфический эффект?

Answer 1

Нет ничего с полки, о которой я знаю.Есть множество способов справиться с этим, но ни один из них не очень прост:

В порядке усилий / реально это сделать:

• с использованием чистого CSS или JS,растянуть стороны изображения, начиная с центра.Как пример, оставьте средние 10% в покое.Растяните следующие 9% до 10% ширины.Следующие ширины от 8% до 10%, затем от 7% до 10% и т. Д. Если вы используете JS, используйте canvas, если вы используете CSS, вам нужно множество DIVS со смещенными фоновыми позициями (в качестве основной предпосылки используйте Google «CSS Coke Can»).)
• Используя что-то вроде Three.js, создайте 3D-среду и просто поместите изображение в качестве фона - вы получите бесплатное искажение в WebGL.
• Используя CSS3, разбейте изображение накучу ломтиков и положите их вокруг «камеры» в цилиндрической форме.Вы получите граничное искажение «бесплатно», но только в современных браузерах (я сделал это, он отлично работает).