[How to] Rotating image with JavaScript and canvas in HTML 5

Started by Xhanch Studio, May 08, 2011, 11:46:27 AM

previous topic - next topic
Go Down

Xhanch Studio

May 08, 2011, 11:46:27 AM Last Edit: May 08, 2011, 12:02:34 PM by Xhanch Studio
Rotating images is not new thing in JavaScript. But, this tutorial will provide something new because we will use canvas in HTML 5. Here, you will learn how to rotate an image in 4 directions (0°, 90°, 180° and 270°/-90°) and the rotated image will be displayed via the canvas while the original image will be hidden. With this you can rotate any type of image (jpg/jpeg, png, gif, and so on)


Demo

You can find the demo here at
http://xhanch.com/rotating-image-with-javascript-and-canvas-in-html-5/


Source code

Code Select
<html>
    <head>
        <title>Javascript image rotator</title>
        <script type="text/javascript">
            function img_rotate(src_id, obj_id, p_deg){
                if(document.getElementById(obj_id)){
                    var o_img = document.getElementById(src_id);
                    var o_cvs = document.getElementById(obj_id);
                    var o_cvc = o_cvs.getContext('2d');

                    switch(p_deg){
                        default:
                        case 0:
                            o_cvs.setAttribute('width', o_img.width);
                            o_cvs.setAttribute('height', o_img.height);
                            o_cvc.rotate(p_deg * Math.PI / 180);
                            o_cvc.drawImage(o_img, 0, 0);
                            break;
                        case 90:
                            o_cvs.setAttribute('width', o_img.height);
                            o_cvs.setAttribute('height', o_img.width);
                            o_cvc.rotate(p_deg * Math.PI / 180);
                            o_cvc.drawImage(o_img, 0, -o_img.height);
                            break;
                        case 180:
                            o_cvs.setAttribute('width', o_img.width);
                            o_cvs.setAttribute('height', o_img.height);
                            o_cvc.rotate(p_deg * Math.PI / 180);
                            o_cvc.drawImage(o_img, -o_img.width, -o_img.height);
                            break;
                        case 270:
                        case -90:
                            o_cvs.setAttribute('width', o_img.height);
                            o_cvs.setAttribute('height', o_img.width);
                            o_cvc.rotate(p_deg * Math.PI / 180);
                            o_cvc.drawImage(o_img, -o_img.width, 0);
                            break;
                    };
                }else{
                    var o_img = document.getElementById(src_id);
                    switch(p_deg){
                        default:
                        case 0:
                            o_img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
                            break;
                        case 90:
                            o_img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
                            break;
                        case 180:
                            o_img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
                            break;
                        case 270:
                        case -90:
                            o_img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
                            break;
                    };
                };
            }
               
            function add_load_event(func){
                var oldonload = window.onload;
                if (typeof window.onload != 'function')
                    window.onload = func;
                else{
                    window.onload = function(){
                        if(oldonload)
                            oldonload();                       
                        func();
                    }
                }
            }

            add_load_event(function(){
                img_rotate('image', 'canvas', 0);
            });
        </script>
    </head>
    <body>
        <img id="image" src="http://xhanch.com/wp-content/themes/xhanch-studio/logo.png" alt="Xhanch.com" style="display:none"/>
        <input type="button" value="0°" onclick="img_rotate('image', 'canvas', 0);"/>
        <input type="button" value="90°" onclick="img_rotate('image', 'canvas', 90);"/>
        <input type="button" value="180°" onclick="img_rotate('image', 'canvas', 180);"/>
        <input type="button" value="-90°" onclick="img_rotate('image', 'canvas', -90);"/><br/><br/>
        <a href="http://xhanch.com" target="_blank"><canvas id="canvas"></canvas></a>
    </body>
</html>
Best Regards,
Susanto B.Sc
----------------------------------------------------------------------------
Web development services, WordPress plugin and theme development, PSD to XHTML conversion - http://xhanch.com
Read free manga online - http://authrone.com

Go Up