Zoom-Rotate-Crop Utility using HTML 5 Canvas and jQuery


HTML 5 has and is still in development and there are a lot or rumors and speculations regarding the final release of HTML 5, some say 2015 and some 2020. OK… but in between all those dates, browsers have already started off to deliver most of it already. A nice updated website caniuse.com displays all HTML5 features and which browser supports what. HTML 5 has a lot of new html tags one out of them <canvas> deals with drawing and modifying graphics on the fly on a webpage.

Following is a small utility using HTML 5 canvas which uses a canvas to draw image and then manipulate(rotate/zoom) it by using rotate and scale methods on the drawn image, finally a crop area is selected by using resizable of jQuery and canvas clip() method is used to crop the selected area.

https://raw.githubusercontent.com/dominicdsouza/ZoomRotateCrop/master/index.html

I am also planning to put out a jsbin for the above example will be coming up soon.

NOTE: Above code still needs some improvements and is advisable for developmental/experimental purposes.

Further Reading:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial

https://github.com/dominicdsouza/ZoomRotateCrop/

 

 

 

 

 

 

Advertisements

About Dominic

J for JAVA more about me : http://about.me/dominicdsouza
This entry was posted in Thechy Stuff and tagged , , , , , . Bookmark the permalink.

One Response to Zoom-Rotate-Crop Utility using HTML 5 Canvas and jQuery

  1. blackjedi says:

    thank you very much. it is what i was looking for. What it is missing is resizing. 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s