如何獲得與HTML5畫布圖像

我有一個包含一個圖像，如下面的例子中示出了一個大的畫布的旋轉作物：如何獲得與HTML5畫布圖像

enter image description here

我有紅色的位置和旋轉角矩形：

red : { 
     top : top, 
     left : left, 
     width : width, 
     height : height, 
     angle : angle 
    }

我也有全套平移座標表示的紅色旋轉RECTANG的實際角點樂。

最後我有藍色矩形的相對的位置紅色矩形爲：

blue : { 
    left : left, 
    top: top, 
    width : width, 
    height : height 
}

我需要做的就是創建一個新的畫布，在藍色的大小是什麼矩形包含藍色矩形中包含的圖像的正確旋轉部分，從而產生如下圖像：

enter image description here

我正在使用HTML5畫布在javascript中執行此操作。我遇到的問題是矩形旋轉時獲取圖像的正確部分。

任何HEP將不勝感激

編輯：這是我到目前爲止有：

 var c = getCenterPoint(); // returns center x/y positions of the RED rectangle 
     canvas.width = blue.width; 
     canvas.height = blue.height; 
     var blueX = red.left + blue.left; 
     var blueY = red.top + blue.top; 
     var tx = blueX - c.x; 
     var ty = blueY - c.y; 


     this.cursorContext.translate(tx, ty); 
     this.cursorContext.rotate(angle * (Math.PI/180)); 
     this.cursorContext.translate(-tx, -ty); 

     this.cursorContext.drawImage(image, -blueX, -blueY, blue.width, blue.height);

來源

2014-01-14 Gordo

您能分享您嘗試過的相關代碼嗎？ – K3N

@Ken請參閱我的編輯 – Gordo

您可以使用一個臨時的帆布剪輯和unrotate您的藍色方塊

從圖像中剪取藍色矩形的邊界框
Unrotate boundingBox的讓藍色矩形不旋轉（角度== 0）
剪輯額外boundingBox的區域，以露出僅藍色矩形
繪製藍色矩形到顯示畫布

enter image description here

這裏的代碼和演示：http://jsfiddle.net/m1erickson/28EkG/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    // blue rect's info 

    var blueX=421; 
    var blueY=343; 
    var blueWidth=81; 
    var blueHeight=44; 
    var blueAngle=-25.00*Math.PI/180; 

    // load the image 

    var img=new Image(); 
    img.onload=start; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp6.jpg"; 

    function start(){ 

     // create 2 temporary canvases 

     var canvas1=document.createElement("canvas"); 
     var ctx1=canvas1.getContext("2d"); 
     var canvas2=document.createElement("canvas"); 
     var ctx2=canvas2.getContext("2d"); 

     // get the boundingbox of the rotated blue box 

     var rectBB=getRotatedRectBB(blueX,blueY,blueWidth,blueHeight,blueAngle); 

     // clip the boundingbox of the rotated blue rect 
     // to a temporary canvas 

     canvas1.width=canvas2.width=rectBB.width; 
     canvas1.height=canvas2.height=rectBB.height; 

     ctx1.drawImage(img, 
      rectBB.cx-rectBB.width/2, 
      rectBB.cy-rectBB.height/2, 
      rectBB.width, 
      rectBB.height, 
      0,0,rectBB.width,rectBB.height 
     ); 

     // unrotate the blue rect on the temporary canvas 

     ctx2.translate(canvas1.width/2,canvas1.height/2); 
     ctx2.rotate(-blueAngle); 
     ctx2.drawImage(canvas1,-canvas1.width/2,-canvas1.height/2); 

     // draw the blue rect to the display canvas 

     var offX=rectBB.width/2-blueWidth/2; 
     var offY=rectBB.height/2-blueHeight/2; 

     canvas.width=blueWidth; 
     canvas.height=blueHeight; 
     ctx.drawImage(canvas2,-offX,-offY); 

    } // end start 



    // Utility: get bounding box of rotated rectangle 

    function getRotatedRectBB(x,y,width,height,rAngle){ 
     var absCos=Math.abs(Math.cos(rAngle)); 
     var absSin=Math.abs(Math.sin(rAngle)); 
     var cx=x+width/2*Math.cos(rAngle)-height/2*Math.sin(rAngle); 
     var cy=y+width/2*Math.sin(rAngle)+height/2*Math.cos(rAngle); 
     var w=width*absCos+height*absSin; 
     var h=width*absSin+height*absCos; 
     return({cx:cx,cy:cy,width:w,height:h}); 
    } 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2014-01-15 04:45:47 markE

夢幻般的答案。謝謝！ – Gordo

如何獲得與HTML5畫布圖像

回答

相關問題