如何使用HTML5 canvas来旋转图片的裁剪 [英] How to get a rotated crop of an image with HTML5 canvas

问题描述

我有一个包含图片的大型画布，如下例所示：

我有红色矩形的位置和旋转角度：

  red：{
 top：top，
 left：left，
 width：width，
 height：height，
 angle：angle 
} 
  

一组完整的转换坐标表示红色旋转矩形的实际角点。

最后，蓝色矩形相对改为红色矩形：

  blue：{
 left：left，
 top：top，
 width：width，
 height：height 
} 
  

我需要做的是创建一个新的画布，包含正确旋转部分的蓝色包含在蓝色矩形内的图片，形成如下图片：

我在javascript使用HTML5画布。

任何肝都会非常感激。

EDIT：这里是我到目前为止：

  var c = getCenterPoint //返回红色矩形的中心x / y位置
 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）; 
  

解决方案

li>

取消旋转边界框，使蓝色矩形未旋转（angle == 0）

$ b

>

这里是代码和演示： http://jsfiddle.net/m1erickson/28EkG/

 <！doctype html> 
< html> 
< head> 
< link rel =stylesheettype =text / cssmedia =allhref =css / reset.css/> <！ -  reset css  - > 
< script type =text / javascriptsrc =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的信息
 
 var blueX = 421; 
 var blueY = 343; 
 var blueWidth = 81; 
 var blueHeight = 44; 
 var blueAngle = -25.00 * Math.PI / 180; 
 
 //加载图像
 
 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）; 
 
 //获取旋转蓝框的边界框
 
 var rectBB = getRotatedRectBB（blueX，blueY，blueWidth，blueHeight，blueAngle）; 
 
 //将旋转的蓝色矩形的边框折回到
 //到临时画布
 
 canvas1.width = canvas2.width = rectBB.width; 
 canvas1.heigh = 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 
）; 
 
 //在临时画布上旋转蓝色矩形
 
 ctx2.translate（canvas1.width / 2，canvas1.height / 2）; 
 ctx2.rotate（-blueAngle）; 
 ctx2.drawImage（canvas1，-canvas1.width / 2，-canvas1.height / 2）; 
 
 //绘制蓝色矩形到显示画布
 
 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）; 
 
} //结束开始
 
 
 
 //实用程序：获取旋转矩形的边界框
 
 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 =canvaswidth = 300 height = 300>< / canvas> 
< / body> 
< / html> 
  

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

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

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

这篇关于如何使用HTML5 canvas来旋转图片的裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！