Comments on: Load a photo in a canvas, then flip

By: Antaranian

Antaranian — Thu, 15 Oct 2009 16:06:01 +0000

Hlo Peter.
Actually you can flip it without diving into imageData with the Stirfrys way.

var can = (..),
ctx = can.getContext(’2d’),
img = new Image();
img.onload = function(){
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = ‘http://11.media.tumblr.com/tumblr_kr2kxz9bYR1qzklvoo1_500.jpg';
can.onclick = function() {
ctx.scale(-1,1); // to flip vertically, ctx.scale(1,-1);
ctx.drawImage(can, -img.width, 0, img.width, img.height);
}

By: Peter

Peter — Fri, 21 Aug 2009 09:31:06 +0000

Hi there, nice to see some experimenting with . Just a note: this isn’t an actually flip, this is just rotating the image 180 degrees. Flipping it would require you to get into the imageData.

By: Stoyan

Stoyan — Wed, 29 Jul 2009 04:17:15 +0000

Haven’t tried Jacob, but I wouldn’t be surprised.

By: Jacob

Jacob — Mon, 27 Jul 2009 20:58:59 +0000

is this possible with video?

By: Stirfry

Stirfry — Sat, 07 Mar 2009 06:43:30 +0000

Hey, it bugged me that the code didn’t work each click so I fixed it.

Flipping photo in a canvas tag

#canvas {cursor: pointer;}

Example of using

This example shows how a photo is loaded in a tag
and then flipped.

Click on the photo to flip (provided, of course, that your browser supports )

var can = document.getElementById(‘canvas’);
var ctx = can.getContext(’2d’);
var drawflip=0
var img = new Image();
img.src = ‘http://www.phpied.com/wp-content/uploads/2008/05/zlati-nathalie.jpg';

can.onclick = function() {
can.width = img.width;
can.height = img.height;

if (drawflip % 2>0){
ctx.scale(-1,-1)
ctx.drawImage(img, -img.width, -img.height, img.width, img.height);
}

if (drawflip % 2<=0){
ctx.scale(1,1)
ctx.drawImage(img, 0, 0, img.width, img.height);
}

drawflip+=1

}; /*___end can.onclick____*/

Blog post is here

By: Stirfry

Stirfry — Sat, 07 Mar 2009 05:53:43 +0000

can.onclick = function() {
ctx.translate(img.width/2, img.height/2);
ctx.rotate(Math.PI);
ctx.drawImage(img, -img.width/2, -img.height/2, img.width, img.height);
}
this works without a problem
translate to center of image,rotate, then draw the image offset by how far you translated

but the easiest way is this
flip image down flip it back to the left by scaling -1 -1
now move negative amounts to make up for the scaling
can.onclick = function() {
ctx.scale(-1,-1)
ctx.drawImage(img, -img.width, -img.height, img.width, img.height);
}
try it out

By: photo canvas guy

photo canvas guy — Fri, 26 Sep 2008 16:44:54 +0000

thanks for posting this rotation method, the pixel correction is throwing me off too- but glad someone more technical than myself can share this, thanks again.

Stephen.

By: Louis

Louis — Thu, 26 Jun 2008 22:03:14 +0000

Clean, lightweight, but I don’t think it’s the good approch.

By wrapping the image inside a element, you lose all the browser UI for the image. You can drag & drop it, you can’t open it in another tab, etc. Also, from a semantic point of view, it’s an obscur method : search engines won’t be very glad to find a tag.

I think image manipulations belongs to CSS, and we may see them very soon with the implementation of CSS 3 recommendations in Webkit and Firefox.