Comments on: Rotate Images Using JavaScript

By: Paul

Paul — Mon, 19 Sep 2011 00:25:19 +0000

I got this to work with multiple images well by instantiating an array that gets populated with new Image() and then passing each image through an encapsulated function that holds the unique parameters per image. The encapsulated function then prints each picture out, waiting for img.onload(), with a title and description. Output looks like you tacked images on a wall.

By: Jeff Foster

Jeff Foster — Wed, 22 Jun 2011 04:28:06 +0000

For the JavaScript handicapped there is also a way to do this with HTML – first export images as JPG or GIF, and the HTML would look something like this: img src=”/Images/Pic1.png” alt=”Pic1″ name=”Rotate_Me” width=”100″ height=”100″ id=”Rotate_Me”

By: cid

cid — Thu, 30 Dec 2010 15:40:29 +0000

Let’s try that again… here’s a slight variation that works on Chrome:

http://bit.ly/hlbDua

By: cid

cid — Thu, 30 Dec 2010 15:34:24 +0000

Here’s a slight variation that works for Chrome.

javascript:(function () {d=document;b=d.body;o=d.getElementsByTagName(’img’)[0]; o.setAttribute(’width’,'100%’);o.setAttribute(’height’,'100%’);w=o.width;h=o.height;n=new Image();n.src=o.src;sw=w/n.height;sh=h/n.width;s=(sw

By: Sabato

Sabato — Mon, 22 Nov 2010 17:51:06 +0000

Hi,
Image dont seem to load in safari only after click on reset or rotate. Is there any solution for this?
thanks

By: Darren - ajaxBlender

Darren - ajaxBlender — Thu, 17 Dec 2009 17:53:26 +0000

Tobias,

We made a slight modifation to the code we created for this tutorial. You can see the updated version here: http://www.ajaxblender.com/article-sources/jquery/image-rotate/index-updated.html

This script will provide two functions: initRotateImage, which you should call first, to initialize the canvas. (You will notice that there is no CANVAS tag in the markup for this version.) Then use rotateImage(imageID, degree) to rotate images.

Hope this helps!

By: Tobias

Tobias — Wed, 16 Dec 2009 06:50:19 +0000

Nope. There’s no way I’m going to figure this out by myself. I’m clicking on links that seem to actually load a new page with hash…or that’s how it looks to me. And I can’t figure out how I pass an image ID to the functions here. It’s a shame because this is exactly what I need to do, but I need to do it for 16 different images on the same page.

By: Tobias

Tobias — Wed, 16 Dec 2009 05:13:05 +0000

Very cool! What if I wanted to have multiple rotatable images on the same page? How can I pass in the image ID to the function? Hopefully I can figure it out on my own…