Load a photo in a canvas, then flip / Stoyan's phpied.com

Load a photo in a canvas, then flip

Today our family went to the yearly photo session with the girls. We took one shot that can be looked normally, as well as upside down, so I was wondering can you flip an image using a canvas tag. Turns out, yes, you can and it's pretty easy.

» Demo is here.

How to load an image in a `canvas` tag?

Start unpretentiously with an empty canvas tag:

<canvas id="canvas"></canvas>

Now the javascript. Two variables to store a handle to the canvas element and the 2D context of the canvas:

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');

Now let's load an image into the canvas. Using the new Image() constructor you can create an image object, then set its src property to point to the location of the image file. Then set an onload handler for the image which is an anonymous function to be called when the image is done loading. There you put the image inside the canvas using the drawImage() method of the canvas context.

var 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 = 'zlati-nathalie.jpg';

You can also notice how the dimensions of the canvas are adjusted to match the dimensions of the image.

How to flip the image upside down

The canvas context provides a rotate() method. The rotation always happens around the top left corner of the image, so we first translate() the image to the bottom right. This way when the image is rotated, it fits back into the canvas. (There is also a one pixel correction, I have no idea why, just saw that the image wasn't flipping exactly otherwise). Assigning this functionality to the onclick:

can.onclick = function() {
    ctx.translate(img.width-1, img.height-1);
    ctx.rotate(Math.PI);
    ctx.drawImage(img, 0, 0, img.width, img.height);
};

C'est tout! Once again, the demo is here.

This entry was posted on Saturday, May 3rd, 2008 and is filed under JavaScript, canvas, images. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Get notification for future posts: follow me on Twitter or subscribe to my RSS feed

Somewhat related posts

8 Responses to “Load a photo in a canvas, then flip”

Louis Says:
June 26th, 2008 at 5:03 pm
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.
photo canvas guy Says:
September 26th, 2008 at 11:44 am
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.
Stirfry Says:
March 7th, 2009 at 12:53 am
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
Stirfry Says:
March 7th, 2009 at 1:43 am
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 <canvas>

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

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

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
Jacob Says:
July 27th, 2009 at 3:58 pm
is this possible with video?
Stoyan Says:
July 28th, 2009 at 11:17 pm
Haven’t tried Jacob, but I wouldn’t be surprised.
Peter Says:
August 21st, 2009 at 4:31 am
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.
Antaranian Says:
October 15th, 2009 at 11:06 am
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);
}

phpied.com