使用图像支架旋转图像

Question

我创建了一个允许旋转图像和裁剪图像的应用。当我的第一个应用程序以原始图像开始时，裁剪图像就可以了。但问题是，当我旋转一次时，我的裁剪工具无法将图像的顶部，左侧，宽度，高度作为原始图像。我的代码如下。任何人都可以帮我解决这个问题吗？ 我的代码：    

 <script>
$(document).ready(function($) {
        $("#crop").click(function(e){
        var Imgwidth = $('#face').width(), 
            Imgheight =  $('#face').height(),
            faceOffset = $('#face').offset(),
            imgOffset = $('#imgHolder').find('img').offset(), 
            imgX1 = faceOffset.left-imgOffset.left,
            imgY1 = faceOffset.top-imgOffset.top,
            imgX2 =imgX1+Imgwidth,
            imgY2 = imgY1+Imgheight;
        var imgNval = new Array();

          var imageSrc ='Penguins.jpg';    
          var imageObj=new Image();
          imageObj.src=imageSrc; 
        selx1 = imgX1;
        sely1 = imgY1;
        selx2 = imgX2;
        sely2 = imgY2;
        selw = Imgwidth;
        selh = Imgheight;
        console.log(imgX1);
        console.log(imgY1);
        /*console.log(imgX2);
        console.log(imgY2);*/

        /*Passing from one page to another page*/
        var canvas=document.getElementById("Mystore1");
        var context=canvas.getContext("2d");
        context.canvas.height = Imgheight;
        context.canvas.width=Imgwidth;
        context.drawImage(imageObj, imgX1, imgY1, selw, selh, 3, 3, Imgwidth,     canvas.height-5);
    });
});
</script>
<script type="text/javascript"> 
        var loop=0; 
         $(document).ready(function(e) {
            $("#left").click(function(){
                loop+=90;
                  $("#imageHolder").rotate({ animateTo:loop });
                });
             });
         $(document).ready(function(e) {
             $("#right").click(function(){
                 loop-=90;
                $("#imageHolder").rotate({animateTo:loop});
            });
         });
    </script>
    <script type="text/javascript">
            $(function(){
                $(".frame").draggable();
                        });
    </script>
  <canvas id="Mystore1">Your Browser Doesn't support HTML5 Canvas</canvas>
  <div id="imgHolder">
    <img src="Penguins.jpg" id="image"/> 
  </div>
  <div class="frame"><img src="face.jpg" width="80" height="80" id="face"     class="frames"/></div>
  <button id="crop">Crop Me</button>
  <button id="left">Left</button>
  <button id="right">Right</button>
</body>
</html>