JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Original: tilted with transparency</h4>
<h4 id=red>Click near the top-left corner of the image</h4>
<canvas id="canvas" width=300 height=300></canvas><br>
<h4>Straightened</h4>
<canvas id="canvas1" width=300 height=300></canvas>

CSS

body{ background-color: white; }
canvas{border:1px solid purple;}
#red{color:red;}

JavaScript

var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();

var cw,ch,topLeft,topRight,bottomRight,bottomLeft;
var pT,pR,pB,pL;

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
//        img.src="https://dl.dropboxusercontent.com/u/139992952/multple/tiltedCW.png";
img.src="http://i.imgur.com/8rmMZI3.jpg";
function start(){
  cw=canvas.width=img.width;
  ch=canvas.height=img.height;
  ctx.drawImage(img,0,0);

  calcCorners();

  $("#canvas").mousedown(function(e){handleMouseDown(e);});
}


function handleMouseDown(e){
  e.preventDefault();
  e.stopPropagation();         
  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  var dT=calcDistance(mx,my,pT);
  var dR=calcDistance(mx,my,pR);
  var dB=calcDistance(mx,my,pB);
  var dL=calcDistance(mx,my,pL);

  if(dT<dR && dT<dB && dT<dL){
    topLeft=pT;
    topRight=pR;
    bottomRight=pB
  }else if(dR<dT && dR<dB && dR<dL){
    topLeft=pR;
    topRight=pB;
    bottomRight=pL;
  }else if(dB<dT && dB<dR && dB<dL){
    topLeft=pB;
    topRight=pL;
    bottomRight=pT;
  }else{
    topLeft=pL;
    topRight=pT;
    bottomRight=pR;
  }


  // straighten
  var dx=topRight.x-topLeft.x;
  var dy=topRight.y-topLeft.y;
  var angle=Math.atan2(dy,dx);
  var width=Math.sqrt(dx*dx+dy*dy);
  dx=bottomRight.x-topRight.x;
  dy=bottomRight.y-topRight.y;
  var height=Math.sqrt(dx*dx+dy*dy);

  canvas1.width=width;
  canvas1.height=height;
  ctx1.rotate(-angle);
  ctx1.drawImage(img,-topLeft.x,-topLeft.y);

}

function calcDistance(mx,my,p){
  var dx=mx-p.x;
  var dy=my-p.y;
  return(Math.sqrt(dx*dx+dy*dy));
}

function calcCorners(){
  var data=ctx.getImageData(0,0,cw,ch).data;

  // pT (topmost)
  for(var...