拉直圖像從圖像的中心旋轉和縮放

Question

的Instagram有很大的拉直功能 https://help.instagram.com/135826209959819

在哪裏，如果你正圖像就會從圖像和縮放的中心旋轉。

在畫布旋轉從不中心旋轉（我認爲這是從0,0）

而且變焦放大對0,0

context.rotate(.01) 
context.scale(2.2, 2.2) 

你知道什麼辦法，迫使畫布從中心旋轉，朝中心放大？

乾杯

Answer 1

要回答你的問題。你可以通過設置所需的旋轉點：

context.translate(desiredRotationX,desiredRotationY) 

這將導致context.rotate圍繞所需旋轉點旋轉。

但是注意：非縮略圖像的正確旋轉點可能/可能不是圖像的中心。它取決於原始圖像的原始旋轉點。

也許拉直的圖像更好的辦法是：

• 查找圖像的左上角和右上角點。

• 確定連接這兩點的直線的角度。

• 以角度的負值旋轉圖像。

實施例的代碼和演示：

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="https://dl.dropboxusercontent.com/u/139992952/multple/tiltedCCW.png"; 
 
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 y=0;y<ch;y++){ 
 
    for(var x=0;x<cw;x++){ 
 
     var n=(y*cw+x)*4+3; 
 
     if(!pT &&data[n]>40){ pT={x:x,y:y}; break; } 
 
    }} 
 
    // pR (rightmost) 
 
    for(var x=cw-1;x>=0;x--){ 
 
    for(var y=ch-1;y>=0;y--){ 
 
     var n=(y*cw+x)*4+3; 
 
     if(!pR &&data[n]>40){ pR={x:x,y:y}; break; } 
 
    }} 
 
    // pB (bottommost) 
 
    for(var y=ch-1;y>=0;y--){ 
 
    for(var x=cw-1;x>=0;x--){ 
 
     var n=(y*cw+x)*4+3; 
 
     if(!pB &&data[n]>40){ pB={x:x,y:y}; break; } 
 
    }} 
 
    // pL (leftmost) 
 
    for(var x=0;x<cw;x++){ 
 
    for(var y=0;y<ch;y++){ 
 
     var n=(y*cw+x)*4+3; 
 
     if(!pL && data[n]>40){ pL={x:x,y:y}; break; } 
 
    }} 
 
}

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

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