[英]How to get a rotated crop of an image with HTML5 canvas
I have a large canvas containing an image as shows in the example below : 我有一个包含图像的大画布,如下例所示:
I have the position and rotation angle of the red rectangle : 我有红色矩形的位置和旋转角度:
red : {
top : top,
left : left,
width : width,
height : height,
angle : angle
}
I also have a full set of translated coordinates denoting the the actual corner points of the red rotated rectangle. 我还有一整套平移坐标,表示红色旋转矩形的实际角点。
Finally I have the position of the blue rectangle relative to the red rectangle as: 最后,我将蓝色矩形相对于红色矩形的位置设为:
blue : {
left : left,
top: top,
width : width,
height : height
}
What I need to do is create a new canvas, the size of the blue rectangle containing the correctly rotated portion of the image that is contained within the blue rectangle resulting in an image like this: 我需要做的是创建一个新的画布, 蓝色矩形的大小包含图像的正确旋转部分,该部分包含在蓝色矩形中,从而产生如下图像:
I am doing this in javascript using HTML5 canvas. 我在使用HTML5画布的javascript中这样做。 The problem I am having is getting the correct portion of the image when the rectangle is rotated. 我遇到的问题是旋转矩形时获得正确的图像部分。
Any hep would be greatly appreciated 任何肝脏将非常感激
EDIT : Here is what I have so far: 编辑:这是我到目前为止:
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);
You can use a temporary canvas to clip and unrotate your blue box 您可以使用临时画布剪辑和取消旋转蓝框
Clip the boundingbox of the blue rectangle from the image 从图像中剪切蓝色矩形的边界框
Unrotate the boundingbox so the blue rectangle is unrotated (angle==0) 取消旋转边界框,使蓝色矩形不旋转(角度== 0)
Clip the extra boundingbox area away to reveal only the blue rectangle 剪切额外的边界框区域以仅显示蓝色矩形
Draw the blue rectangle to the display canvas 将蓝色矩形绘制到显示画布
Here's code and a Demo: http://jsfiddle.net/m1erickson/28EkG/ 这是代码和演示: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.