How to rotate image with new Image()?

Question

I'm creating new image using

img = new Image();
img.src = image_url;

Then How can I rotate that image before display it?

http://stackoverflow.com/q/2367595/1190388 – hjpotter92 May 11 '13 at 08:37 — hjpotter92, May 11 '13 at 08:37

score -1 · Answer 1 · answered May 11 '13 at 08:40

-1

The raphael.js library supports easier image rotation:

http://raphaeljs.com/image-rotation.html

answered May 11 '13 at 08:40

adamjc

118
6

Including an entire library only to perform this simple task is overkill. One could suggest using GD or imagik to actually create a rotated version of the image as well... I really don't think that this answer would help the OP nor future visitors. – Lix May 11 '13 at 08:43
Thanks for the feedback, although a more tactful response exists. Unless you were talking about the Javascript GD (and not the PHP one), the question specifies a client-side implementation.. hence using a JS library. – adamjc May 11 '13 at 08:50
Yea - I might have gone overboard with the PHP thing (sorry bout that).. I still think that including an entire library only for image rotation when it is available with CSS is still overkill... – Lix May 11 '13 at 08:52

score -1 · Answer 2 · answered May 11 '13 at 09:45

You can do it with css transform:

var img = new Image();
img.src = "http://www.gravatar.com/avatar/a7d7d1a56e455ea29f370251e3582986?s=32&d=identicon&r=PG";
document.getElementsByTagName('body')[0].appendChild(img);
img.style.Transform = "rotate(90deg)"
img.style.MozTransform = "rotate(90deg)"
img.style.webkitTransform = "rotate(90deg)"

How to rotate image with new Image()?

2 Answers2