如何使用html5画布拉直＆amp;裁剪图像？

Question

如何使用html5画布旋转下面显示的图像？

从此之前：

到之后：

Answer 1

通常我不会回答编写代码的请求＃34;但是我有你需要的代码。

我在这里提供它而没有进一步的解释或注释：

＆＃13;

＆＃13;

var canvas1a=document.createElement("canvas");
var ctx1a=canvas1a.getContext("2d");
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
function reOffset1(){
  var BB=canvas1.getBoundingClientRect();
  offsetX1=BB.left;
  offsetY1=BB.top;        
}
var offsetX1,offsetY1;
reOffset1();
window.onscroll=function(e){ reOffset1(); }
window.onresize=function(e){ reOffset1(); }

var topLeft,topRight,bottomRight,bottomLeft;
var startX,startY,mouseX,mouseY;
var isDown=false;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/tilted.jpg";
function start(){
  canvas.width=img.width;
  canvas.height=img.height;
  ctx.drawImage(img,0,0);
  //
  $("#canvas").on('mousedown',handleMouseDown);
}


function handleMouseDown(e){
  e.preventDefault();
  e.stopPropagation();
  //
  mX=parseInt(e.clientX-offsetX);
  mY=parseInt(e.clientY-offsetY);
  //
  if(!topLeft){
    topLeft={x:mX,y:mY};
    drawMarker(topLeft);
  }else if(!topRight){
    topRight={x:mX,y:mY};
    drawMarker(topRight);
  }else{
    $("#canvas").off('mousedown',handleMouseDown);
    //        
    bottomRight={x:mX,y:mY};
    drawMarker(bottomRight);
    //
    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);
    //
    canvas1a.width=canvas1.width=width;
    canvas1a.height=canvas1.height=height;
    ctx1a.rotate(-angle);
    ctx1a.drawImage(img,-topLeft.x,-topLeft.y);
    ctx1.strokeStyle='red';
    ctx1.drawImage(canvas1a,0,0);
    //
    $("#canvas1").mousedown(function(e){handleMouseDown1(e);});
    $("#canvas1").mousemove(function(e){handleMouseMove1(e);});
    $("#canvas1").mouseup(function(e){handleMouseUpOut1(e);});
    $("#canvas1").mouseout(function(e){handleMouseUpOut1(e);});
  }
}

function handleMouseDown1(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  //
  startX=parseInt(e.clientX-offsetX1);
  startY=parseInt(e.clientY-offsetY1);
  // set drag flag
  isDown=true;
}

function handleMouseUpOut1(e){
  if(!isDown){return;}        
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  //
  mouseX=parseInt(e.clientX-offsetX1);
  mouseY=parseInt(e.clientY-offsetY1);
  // clear drag flag
  isDown=false;
  //
  var w=mouseX-startX;
  var h=mouseY-startY;
  canvas2.width=w;
  canvas2.height=h;
  ctx2.drawImage(canvas1a,startX,startY,w,h,0,0,w,h);
}

function handleMouseMove1(e){
  if(!isDown){return;}
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX1);
  mouseY=parseInt(e.clientY-offsetY1);

  ctx1.drawImage(canvas1a,0,0);
  ctx1.strokeRect(startX,startY,mouseX-startX,mouseY-startY);

}

function drawMarker(pt){
  ctx.beginPath();
  ctx.arc(pt.x,pt.y,3,0,Math.PI*2);
  ctx.closePath();
  ctx.fillStyle='red';
  ctx.fill();
}

＆＃13;

body {
  background-color: ivory;
}
canvas {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>First the topLeft corner<br>then click topRight corner<br>then click bottomRight corner</h4>
<canvas id="canvas" width=300 height=300></canvas><br>
<h4>Drag to clip a part of the image</h4>
<canvas id="canvas1" width=300 height=300></canvas>
<h4>Straightened & clipped image</h4>
<canvas id="canvas2" width=300 height=300></canvas>       

＆＃13;

＆＃13;

＆＃13;