Skip to content

Instantly share code, notes, and snippets.

@crusty

crusty/imageRotate.js

Forked from seungjin/imageRotate.js
Created November 18, 2012 10:57
Show Gist options
  • Save crusty/4104562 to your computer and use it in GitHub Desktop.
Save crusty/4104562 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @seungjin seungjin revised this gist Jun 17, 2009. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions imageRotate.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    /* image rotate javascript */

    /* This script and many more are available free online at
    The JavaScript Source!! http://javascript.internet.com
    Created by: Benoit Asselin | http://www.ab-d.fr */
  2. @invalid-email-address Anonymous created this gist Jun 17, 2009.
    97 changes: 97 additions & 0 deletions imageRotate.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,97 @@
    /* This script and many more are available free online at
    The JavaScript Source!! http://javascript.internet.com
    Created by: Benoit Asselin | http://www.ab-d.fr */

    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);
    });