Rotate Image 90 CW/CCW using Canvas

by Subhasish2015

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<div>
	Your image URL: <input type="text" id="imageurl"></input><button id="loadimage">load image</button>
</div>
<br>
<div>
<button id="restore">restore</button><button id="rotate_ccw">rotate_ccw</button><button id="rotate_cw">rotate_cw</button>
</div>
<br>
<div><canvas id="canvas"><img id="image" /></canvas></div>
<div id="output"></div>

JavaScript

// not a perfect implementation, doesn't support non-90 degree rotation etc.
var screenwidth = 400;
var defaultimgurl = "https://s3-eu-west-1.amazonaws.com/static.melkweg.nl/uploads/images/scaled/event_header/21747";
var imgurl = null;

	$(document).ready( function() {
        loadImage();
        $('#loadimage').click(function() {
			urlProvided();
		});
        $('#restore').click(function() {
			loadImage();
		});
        $('#rotate_ccw').click(function() {
			rotate_ccw();
		});
        $('#rotate_cw').click(function() {
			rotate_cw();
		});
	});
    function rotate_cw(){
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        
        var img = new Image();
        img.src = imgurl;
        
        var maxsize = screenwidth;
	    var w = maxsize;
		var ratio = (img.width / w);
		var h = (img.height / ratio);
		canvas.width = h;
		canvas.height = w;
        
		ctx.translate(w-h, w);
        ctx.rotate( (-90 * Math.PI) / 180);
        ctx.translate(0,-(w-h));
        ctx.drawImage(img,0,0,w,h);
        
        ctx.save();
    }

    function rotate_ccw(){
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        
        var img = new Image();
        img.src = imgurl;
        
        var maxsize = screenwidth;
	    var w = maxsize;
		var ratio = (img.width / w);
		var h = (img.height / ratio);
		canvas.width = h;
		canvas.height = w;
        
		ctx.translate(h, 0);
        ctx.rotate( (90 * Math.PI) / 180);
        ctx.drawImage(img,0,0,w,h);
        ctx.save();
    }

	function loadImage(){
        var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		ctx.setTransform(1, 0, 0, 1, 0, 0);
        
		var img = new Image();
        if(imgurl==null || imgurl==""){
            imgurl = defaultimgurl;
        }
        img.src = imgurl;
        
        var maxsize = screenwidth;
	    var w = maxsize;
		var ratio = (img.width / w);
		var...