Announcement

Collapse
No announcement yet.

JavaScript Image Rotation script with CANVAS in HTML5

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • JavaScript Image Rotation script with CANVAS in HTML5

    Rotating images is not new type of JavaScript effects because they were ever showed on [email protected] through many JavaScript code examples:

    - detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code:
    <script type="text/javascript">
    // Created by: Benoit Asselin | http://www.ab-d.fr
    // This script downloaded from www.JavaScriptBank.com
    
    function rotate(p_deg) {
    	if(document.getElementById('canvas')) {
    		/*
    		Ok!: Firefox 2, Safari 3, Opera 9.5b2
    		No: Opera 9.27
    		*/
    		var image = document.getElementById('image');
    		var canvas = document.getElementById('canvas');
    		var canvasContext = canvas.getContext('2d');
    		
    		switch(p_deg) {
    			default :
    			case 0 :
    				canvas.setAttribute('width', image.width);
    				canvas.setAttribute('height', image.height);
    				canvasContext.rotate(p_deg * Math.PI / 180);
    				canvasContext.drawImage(image, 0, 0);
    				break;
    			case 90 :
    				canvas.setAttribute('width', image.height);
    				canvas.setAttribute('height', image.width);
    				canvasContext.rotate(p_deg * Math.PI / 180);
    				canvasContext.drawImage(image, 0, -image.height);
    				break;
    			case 180 :
    				canvas.setAttribute('width', image.width);
    				canvas.setAttribute('height', image.height);
    				canvasContext.rotate(p_deg * Math.PI / 180);
    				canvasContext.drawImage(image, -image.width, -image.height);
    				break;
    			case 270 :
    			case -90 :
    				canvas.setAttribute('width', image.height);
    				canvas.setAttribute('height', image.width);
    				canvasContext.rotate(p_deg * Math.PI / 180);
    				canvasContext.drawImage(image, -image.width, 0);
    				break;
    		};
    		
    	} else {
    		/*
    		Ok!: MSIE 6 et 7
    		*/
    		var image = document.getElementById('image');
    		switch(p_deg) {
    			default :
    			case 0 :
    				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
    				break;
    			case 90 :
    				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
    				break;
    			case 180 :
    				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
    				break;
    			case 270 :
    			case -90 :
    				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
    				break;
    		};
    		
    	};
    };
    
    // Multiple onload function created by: Simon Willison
    // http://simonwillison.net/2004/May/26/addLoadEvent/
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }
    
    addLoadEvent(function() {
    	var image = document.getElementById('image');
    	var canvas = document.getElementById('canvas');
    	if(canvas.getContext) {
    		image.style.visibility = 'hidden';
    		image.style.position = 'absolute';
    	} else {
    		canvas.parentNode.removeChild(canvas);
    	};
    	
    	rotate(0);
    });
    </script>
    Step 2: Copy & Paste HTML code below in your BODY section
    HTML
    Code:
    <!--
    /*
         This script downloaded from www.JavaScriptBank.com
         Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    */
    -->
    <p>
    	rotate:
    	<input type="button" value="0°" onclick="rotate(0);">
    
    	<input type="button" value="90°" onclick="rotate(90);">
    	<input type="button" value="180°" onclick="rotate(180);">
    	<input type="button" value="-90°" onclick="rotate(-90);">
    </p>
    <p>
    	<img id="image" src="http://www.javascriptbank.com/templates/jsb.V8/images/logo_jsbank.jpg" alt="">
    	<canvas id="canvas"></canvas>
    </p>





Working...
X