由画布旋转后的图片裁剪 [英] Image crop after rotate by canvas

问题描述

我有一个html5画布。我想在画布中绘制/旋转图像，图像大小不会改变。我根据图像大小设置画布的宽度/高度。旋转图像有一个问题
旋转图像后，红色三角形是庄稼。
在下面的链接一个例子显示这个在problem.Please帮助。

 <！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> 
 #containerDiv {
 border：1px solid red; 
 position：absolute; 
 top：100px; 
 left：100px; 
} 
 #canvas {
 border：1px solid green; 
} 
< / style> 
< script> 
 
 $（function（）{
 var canvas = document.getElementById（canvas）; 
 var ctx = canvas.getContext（2d）; 
 var imgWidth = 200; 
 var imgHeight = 300; 
 var size = {width：imgWidth，height：imgHeight}; 
 var rotation = 0; 
 var deg2Rad = Math.PI / 180; 
 var count1 = 0; 
 var count2 = 0; 
 
 var img = new Image（）; 
 img.onload = function b $ b imgWidth = img.width; 
 imgHeight = img.height; 
 size = {width：imgWidth，height：imgHeight}; 
 draw（）; 
} 
 img.src =https://dl.dropboxusercontent.com/u/139992952/stackoverflow/Rotate.png; 
 
 function draw（）{
 canvas.width = size .width; 
 canvas.height = size.height; 
 
 //计算画布的中心点
 var cx = canvas.width / 2; 
 var cy = canvas.height / 2; 
 var info = document.getElementById（info）; 
 info.innerHTML =canvas size：+（count1 ++）+：+ cx +/+ cy; 
 
 //在新大小的画布的中心绘制矩形
 ctx.clearRect（0,0，canvas.width，canvas.height）; 
 ctx.fillStyle =rgba（216,216,150,1.0）; 
 ctx.translate（cx，cy）; 
 ctx.rotate（rotation * deg2Rad）; 
 ctx.drawImage（img，-imgWidth / 2，-imgHeight / 2）; 
} 
 
 document.getElementById（rotate）。addEventListener（click，rotateClicked，false）; 
 
 function rotateClicked（e）{
 rotation + = 30; 
 draw（） 
} 
 
 document.getElementById（resize）。addEventListener（click，resizeClicked，false）; 
 
 function resizeClicked（e）{
 rotation + = 30; 
 newSize（imgWidth，imgHeight，rotation）; 
 draw（） 
} 
 
 function newSize（w，h，a）{
 var rads = a * Math.PI / 180; 
 var c = Math.cos（rads）; 
 var s = Math.sin（rads）; 
 if（s <0）{s = -s; } 
 if（c <0）{c = -c; } 
 size.width = h * s + w * c; 
 size.height = h * c + w * s; 
} 
 
}）; 
 
< / script> 
 
< / head> 
 
< body> 
< button id =rotate>旋转而不调整大小< / button> 
< button id =resize>使用调整大小调整大小< / button> 
< p id = info>< / p> 
 
< div id =containerDiv> 
< canvas id =canvaswidth = 400 height = 400>< / canvas> 
< / div> 
 
< / body> 
< / html> 
  

I have a html5 canvas. I want to draw/rotate the image in the canvas and image size does not change.I set width/height of canvas base on size of image.I have a problem to rotate an image.َ After rotate image,the red triangles was crop. In below link a example showing this in problem.Please help. http://jsfiddle.net/zsh64/6ZsCz/76/

 var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var angleInDegrees = 0;
      var image = document.createElement("img");
      image.onload = function () {
          canvas.width = image.width;
          canvas.height = image.height;
          ctx.drawImage(image, 0,0);
      };
      image.src = "Images/rotate.png";
      $("#R").click(function () {
          angleInDegrees += 90;
          drawRotated(angleInDegrees);
      });
      $("#L").click(function () {
          angleInDegrees -= 90;
          drawRotated(angleInDegrees);
      });
      function drawRotated(degrees) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.save();
          ctx.translate(canvas.width / 2, canvas.height / 2);
          ctx.rotate(degrees * Math.PI / 180);
          ctx.drawImage(image, -image.width / 2, -image.width / 2);
          ctx.restore();
      }

解决方案

If you rotate your image, you can recalculate the boundingbox needed to contain it.

This code will takes width/height/rotation angle and returns the new bounding box size:

function newSize(w,h,a){
    var rads=a*Math.PI/180;
    var c = Math.cos(rads);
    var s = Math.sin(rads);
    if (s < 0) { s = -s; }
    if (c < 0) { c = -c; }
    size.width = h * s + w * c;
    size.height = h * c + w * s ;
}

Here is example code and a Fiddle: http://jsfiddle.net/m1erickson/h65yr/

<!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>
        #containerDiv{
          border: 1px solid red;
          position:absolute;
          top:100px;
          left:100px;
        }
        #canvas{
          border: 1px solid green;
        }
    </style>
    <script>

$(function(){
         var canvas=document.getElementById("canvas");
         var ctx=canvas.getContext("2d");
         var imgWidth=200;
         var imgHeight=300;
         var size={width:imgWidth, height:imgHeight};
         var rotation=0;
         var deg2Rad=Math.PI/180;
         var count1=0;
         var count2=0;

          var img=new Image();
          img.onload=function(){
              imgWidth=img.width;
              imgHeight=img.height;
              size={width:imgWidth, height:imgHeight};
              draw();
          }
          img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/Rotate.png";

      function draw(){
         canvas.width=size.width;
         canvas.height=size.height; 

         // calculate the centerpoint of the canvas
         var cx=canvas.width/2;
         var cy=canvas.height/2;
         var info=document.getElementById("info");
         info.innerHTML="canvas size: "+(count1++)+": "+cx+" / "+cy;

         // draw the rect in the center of the newly sized canvas
         ctx.clearRect(0,0,canvas.width,canvas.height);
         ctx.fillStyle="rgba(216,216,150,1.0)";
         ctx.translate(cx,cy);
         ctx.rotate(rotation * deg2Rad);
         ctx.drawImage(img,-imgWidth/2,-imgHeight/2);
      }

      document.getElementById("rotate").addEventListener("click", rotateClicked, false);

      function rotateClicked(e){
        rotation+=30;
        draw();
      }

      document.getElementById("resize").addEventListener("click", resizeClicked, false);

      function resizeClicked(e){
        rotation+=30;
        newSize(imgWidth,imgHeight,rotation);
        draw();
      }

      function newSize(w,h,a){
        var rads=a*Math.PI/180;
        var c = Math.cos(rads);
        var s = Math.sin(rads);
        if (s < 0) { s = -s; }
        if (c < 0) { c = -c; }
        size.width = h * s + w * c;
        size.height = h * c + w * s ;
    }

});

    </script>

</head>

<body>
<button id="rotate">Rotate without resize</button>
<button id="resize">Resize with resize</button>
<p id=info></p>

<div id="containerDiv">
    <canvas id="canvas" width=400 height=400></canvas>
</div>

</body>
</html>

这篇关于由画布旋转后的图片裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！