Hello!
I'm trying to flip an image horizontally on the client side. Is it possible to rotate or change the orientation of an image by using JavaScript or CSS2?
aPPmaSTer 0 Light Poster
tinymark 1 Junior Poster
My first thought isn't going to be easy. Here's a little description of the problem. Take a picture and look at it one raster line at a time. Load the pixel information, per pixel, into an array. Read out the array backwards to an empty image off screen. Repeat for each raster line. When the image is built, cache it and be ready to swap it out with it's mirror.
Good speech, but how. Each image file, .bmp, .jpg, .png has a file format. I used to know bmp but I'll bet you want something else.
http://www.libpng.org/pub/png/spec/1.2/PNG-Structure.html for png and
http://en.wikipedia.org/wiki/JPEG for jpeg.
Once I got going, I could make any bmp I wanted to make. Skip past formatting sections and read the data inside the data section of the bmp file. I used this for a zooming feature I added into a VB program I wrote.
Hope this helps.
aPPmaSTer 0 Light Poster
I was hoping that there was a more direct method of displaying a mirror image.
tinymark 1 Junior Poster
There is:
http://ajaxian.com/archives/automated-javascript-vertical-flip-image-reflection
http://cow.neondragon.net/stuff/reflection/
These should get you going. You can control all the properties of the reflection so start with no opacity fade.
When you see a perfect reflection, change the css and move it off stage. There are some more tricks to figure out. If I can help as you develop the code, I will.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.