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.
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 canvas, images, JavaScript. 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
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 atag.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.
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.
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
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>tagand 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
July 27th, 2009 at 3:58 pm
is this possible with video?
July 28th, 2009 at 11:17 pm
Haven’t tried Jacob, but I wouldn’t be surprised.
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.
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);
}
March 9th, 2012 at 6:05 am
[...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]
March 9th, 2012 at 6:06 am
[...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]
March 9th, 2012 at 12:15 pm
[...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]
March 9th, 2012 at 4:34 pm
[...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]
March 10th, 2012 at 10:37 am
[...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]
March 11th, 2012 at 11:45 am
[...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]
March 11th, 2012 at 12:30 pm
[...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]
March 12th, 2012 at 11:12 pm
[...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]
March 12th, 2012 at 11:52 pm
[...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]
March 22nd, 2012 at 3:11 pm
[...] Web Browsers” (“The Canvas”), Tali Garsiel, HTML5 Rocks Tutorials HTML5 Canvas Tutorials “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com “How to Draw With HTML5 Canvas,” Jamie Newman, Think Vitamin [...]
April 25th, 2012 at 1:39 am
For images with transparent backgrounds such as PNGs, the canvas must be cleared out before translating to avoid undesired overlaps.
ctx.clearRect(0, 0, img.width, img.height);
April 29th, 2012 at 2:57 am
[...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]
June 5th, 2012 at 9:54 am
instant facelift…
[...]Load a photo in a canvas, then flip / Stoyan’s phpied.com[...]…
June 30th, 2012 at 11:38 am
[...] the canvas stuff I started by copying an old post to load an image into a canvas. This constructor was [...]
July 13th, 2012 at 8:40 am
Thank you very much i am new at html5 canvas,so this article is very helpful,can you help me regarding zoom In,Out,Rotate,pan image inside canvas element
November 28th, 2012 at 11:20 pm
I’m extremely inspired with your writing abilities and also with the structure on your blog. Is this a paid topic or did you customize it your self? Anyway stay up the nice quality writing, it’s uncommon to peer a nice blog like this one today..
March 5th, 2013 at 1:01 pm
is possible in automatic loop? for exemple in 5 seconds change image
May 18th, 2013 at 3:41 pm
Good post! We will be linking to this great content on
our website. Keep up the good writing.