CODEWITHSUNDEEP
javascriptjquery
SamuraiJack
SamuraiJack

Reputation: 5539

Magnifying a portion of Image?

How can i zoom a portion of image without having to use two images. I mean, suppose you have only one image which is not big enough. I want to magnify a portion of this image(beyond 100%) on mouse hover. I do not care if it leads to pixelation (which it of course will). I tried http://zoomy.me/home but it too uses two different images (small and bigger version of image).

Upvotes: 1

Views: 968

Answers (2)

oyophant
oyophant

Reputation: 1304

Follow these steps:

  • replace the image with a canvas rendering the image
  • use getImageData() to get the pixels of the rectangle around the mouse pointer
  • create new magnified image data
  • use putImageData() to render the magnified data in another canvas

I just scribbled an example here: http://kirox.de/test/magnify.html

Upvotes: 1

stevepkr84
stevepkr84

Reputation: 1657

I'd recommend using cloud zoom. We used it and it was fairly effortless:

http://www.starplugins.com/cloudzoom

Upvotes: 2

Related Questions