CODEWITHSUNDEEP
javascriptimage-processing
ptamzz
ptamzz

Reputation: 9355

image processing filter with JavaScript

If you look at Google Street View image, the image is radially distorted from the center towards the edges which gives a more realistic impression.

I want to achieve a similar effect using JavaScript.

So is there any image processing script/library/algorithm to provide this specific effect?

Upvotes: 0

Views: 289

Answers (1)

user578895
user578895

Reputation:

There's nothing off the shelf that I know of. There are a bunch of ways you can handle this but none of them are very straight-forward:

In order of effort / realistically doing this:

  • using pure CSS or JS, stretch the sides of the image starting from the center. As an example, leave the middle 10% alone. Stretch the next 9% to 10% width. The next 8% to 10% width, then 7% to 10%, etc... If using JS, use canvas, if using CSS you need tons of DIVS with offset background positions (google "CSS Coke Can" for the basic premise)
  • Using something like Three.js, make a 3D environment and simply place the image as a background -- you'll get free distortion in WebGL.
  • Using CSS3, break the image into a bunch of slices and lay them around a "camera" in cylindrical view. You'll get edge distortion for "free" but only in modern browsers (i've done this, it works great).

Upvotes: 2

Related Questions