如何使用html5畫布來整理和裁剪圖像？

Question

如何使用html5 canvas來旋轉下面顯示的圖像？

從之前：

後：

Answer 1

通常我不會回答 「的要求編寫代碼」，但我有你需要鋪設碼周圍。

我在這裏提供它沒有進一步的解釋或註釋：

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

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

<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>