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

问题描述

我有一个 html5 画布.我想在画布中绘制/旋转图像并且图像大小不会改变.我根据图像大小设置画布的宽度/高度.旋转图像时遇到问题.َ旋转图像后，红色三角形被裁剪.在下面的链接中，一个例子显示了这个问题.请帮忙.http://jsfiddle.net/zsh64/6ZsCz/76/

 var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");varangleInDegrees = 0;var image = document.createElement("img");image.onload = 函数 () {canvas.width = image.width;画布高度 = 图像高度；ctx.drawImage(image, 0,0);};image.src = "图片/旋转.png";$("#R").click(function () {角度角度 += 90;drawRotated(angleInDegrees);});$("#L").click(function () {角度角度 -= 90;drawRotated(angleInDegrees);});函数 drawRotated(degrees) {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.save();ctx.translate(canvas.width/2, canvas.height/2);ctx.rotate(度 * Math.PI/180);ctx.drawImage(image, -image.width/2, -image.width/2);ctx.restore();}

解决方案

如果旋转图像，则可以重新计算包含它所需的边界框.

此代码将采用宽度/高度/旋转角度并返回新的边界框大小:

function newSize(w,h,a){var rads=a*Math.PI/180;var c = Math.cos(rads);var s = Math.sin(rads);如果 (s <0) { s = -s;}如果 (c <0) { c = -c;}size.width = h * s + w * c;尺寸.高度 = h * c + w * s ;}

这是示例代码和小提琴:http://jsfiddle.net/m1erickson/h65yr/

<头><link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/><!-- 重置 css --><script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script><风格>#containerDiv{边框:1px纯红色；位置:绝对；顶部:100 像素；左:100像素；}#帆布{边框:1px纯绿色；}</风格><脚本>$(函数(){var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");var imgWidth=200;var imgHeight=300;var size={width:imgWidth, height:imgHeight};无功旋转=0;var deg2Rad=Math.PI/180;变量计数1=0；变量计数2=0；var img=new Image();img.onload=function(){imgWidth=img.width;imgHeight=img.height;size={width:imgWidth, height:imgHeight};画();}img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/Rotate.png";函数绘制(){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="画布尺寸:"+(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);函数rotateClicked(e){旋转+=30；画();}document.getElementById("resize").addEventListener("click", resizeClicked, false);函数 resizeClicked(e){旋转+=30；newSize(imgWidth,imgHeight,rotation);画();}函数 newSize(w,h,a){var rads=a*Math.PI/180;var c = Math.cos(rads);var s = Math.sin(rads);如果 (s <0) { s = -s;}如果 (c <0) { c = -c;}size.width = h * s + w * c;尺寸.高度 = h * c + w * s ;}});<身体><button id="rotate">旋转而不调整大小</button><button id="resize">调整大小</button><p id=信息></p><div id="containerDiv"><canvas id="canvas" width=400 height=400></canvas>

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屋！