pisi / Reel

The premier 360° solution for jQuery.
http://reel360.org
MIT License
689 stars 210 forks source link

Real-time image deformation #284

Open DJTen opened 9 years ago

DJTen commented 9 years ago

I am making a web site for a person who takes photographs of houses that are for sale. Sometimes his customers want a 360 degree panorama of a particular room. I decided to use Reel to handle displaying the panorama images. This guy uses a wide angle lens to capture a lot of the room, then he has some software that will stitch the images into one wide panorama image. It works well, but the lines of the room (edges of walls, ceilings, etc.) end up looking curved. I am wondering if it would be possible to add some image deformation into Reel, so that I could, in real time, straighten out the curved wide-angle images while displaying the panorama. I also think it would look more like you are actually there in the room, rather than just watching some image slide by in front of you.

niravraval commented 9 years ago

I tried to added images run time in data-images... I am using base64 images as an image source, but its not worked well. but if you have an image as a data source directly you can definitely add run-time if that is what you needed. you need to just reassign the .reel() to the image.

var aImage[] = new array(), img = document.getElementById('imgFront'), imgIndex = 0;

for (var i = startIndex; i <= endIndex; i++) { aImage[imgIndex] = new Image(); aImage[imgIndex].src = loadImage(i); img.images.push(aImage[imgIndex]); imgIndex += 1; } $("#imgFront").reel();

this is how I am adding image when user click on any product. So, I think you can achieve what you required, let me know if it helps or not.