Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Possible to mirror or flip an image?

Status
Not open for further replies.
AndyGroom

AndyGroom

Programmer
May 23, 2001
972
GB
Hi,

I run a wallpaper site and I'd like to add an feature so that before people download a wallpaper they can choose to mirror it (left becomes right etc) or change it to greyscale.

Would I need to buy some kind of activex component in order to achieve this, if so can anyone recommend one? Is this question even in the right forum?

I'd appreciate any advice.


- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Sort by date Sort by votes

You know... I would do this yourself server-side using something like PHP. Then you return the image with the effect applied -- and your site need know nothing special... the image may be flipped, greyscale etc... it doesn't matter... since all that is handled behind the scenes on the server.

If you were to go down the ActiveX route, you push out non-IE for windows users (restricting access for firefox users etc)... and even then I doubt many visitors will be happy allowing an ActiveX control to run on their machine when they visit your site!

Depending on the server-side options you have available, I would make my next stop some graphics manipulation tutorials for either ASP or PHP programmers.

Cheers,
Jeff

 
Upvote 0 Downvote

On IE for windows, you can use the FlipH filter to flip an image horizontally:

Code: 
img {
    filter: FlipH;
}

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Thanks I'll look into both those avenues, much appreciated.


- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Upvote 0 Downvote
Hi BillyRay,

Do you know if it's possible to apply the flip after the image has loaded? Ideally I wanted a button or link that just flips the image. I'm afraid I'm not too hot at Javascript!


- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Upvote 0 Downvote
Sure - you can do that with JavaScript:

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		function mirrorImage() {
			document.getElementById('myImg').style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
		}
	//-->
	</script>
</head>
<body>
	<img id="myImg" src="wibble.jpg" width="100" height="50" alt="An image" />
	<input type="button" value="Flip Image" onclick="mirrorImage();" />
</body>
</html>

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Thanks Dan, the code works perfectly. The only remaining problem, which I guess in insurmountable, is that if you flip the image and then either save or copy it you don't get the flipped version! Is there any way to overcome that?


- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Upvote 0 Downvote

Not client-side, no. You'll have to use server-side code for that.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Thanks Dan, but it's still useful to know that the flip feature exists.

I'll check out ImageMagick, thanks Tsuji.


- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Upvote 0 Downvote
you could also just make 3 images of that image and have one be the flipped version, one be original, and one be grayscale. and just have the one show that the checkbox is clicked for. If you have a lot of images, or are short on space, then this may not be the answer. but this is the easiest way i can think of.

David

David Kuhn
------------------
 
Upvote 0 Downvote
Thanks David, I'd considered that but there are 33,000 of them!

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Upvote 0 Downvote
Then do flip/mirror only on demand (w/ 3rd party component or imagemagick) and deliver image with server-side script.

------
heisenbug: A bug that disappears or alters its behavior when one attempts to probe or isolate it
schroedinbug: A bug that doesn't appear until someone reads source code and realizes it never should have worked, at which point the program promptly stops working for everybody until fixed.
[ba
 
Upvote 0 Downvote
I've installed ImageMagick and PerlMagick on my webserver but I don't have the knowledge to implement the flip function so it'll have to wait until I can figure it out!


- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
663
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
996
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
771
lexer
lexer
TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
380
gmmastros
gmmastros
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top