个人中心
gpt4 book ai didi

javascript - 如何使用 HTML canvas 获取图像的旋转裁剪

转载 作者：塔克拉玛干 更新时间：2023-11-02 20:24:49 29 4
gpt4 key购买 nike

我有一个包含图像的大 Canvas ，如下例所示:

enter image description here

我有红色矩形的位置和旋转 Angular :

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

我还有一套完整的翻译坐标，表示红色旋转矩形的实际 Angular 点。

最后，我得到了蓝色矩形相对于红色矩形的位置:

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

我需要做的是创建一个与blue 矩形大小相同的新 Canvas 。新 Canvas 应包含图像的正确旋转部分，该部分包含在 blue 矩形中。生成的图像应如下所示:

enter image description here

到目前为止，这是我的 JavaScript 代码:

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

我遇到的问题是在旋转矩形时获取图像的正确部分。我该怎么做？

最佳答案

您可以使用临时 Canvas 来剪辑和取消旋转您的蓝框

  • 从图像中裁剪蓝色矩形的边界框

  • 取消旋转边界框，使蓝色矩形不旋转( Angular ==0)

  • 剪掉额外的边界框区域以仅显示蓝色矩形

  • 将蓝色矩形绘制到显示 Canvas

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>

关于javascript - 如何使用 HTML canvas 获取图像的旋转裁剪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21126536/

29 4 0
文章推荐： android - MutableLiveData 在 JUnitTest 中为 null
文章推荐： iOS 企业开发者计划
文章推荐： android -/dev/kvm 权限被拒绝的 android 模拟器
文章推荐： ASP.Net 在 UIWebView 和 ASIHttpRequest 之间形成身份验证 cookie
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com