HTML5 HTML 中级开发 Javascript

在HTML5 Canvas中旋转矩形图像

Silvia Campo

3.86/5 (5投票s)

2017年11月14日

CPOL

2分钟阅读

19989

如何使用HTML5将矩形图像（如相机照片）旋转90度。

引言

我发现自己正在构建一个用于上传照片的网站。有时照片需要旋转。用户可以取消上传，在本地旋转它们并重新启动，但我试图找到一种在同一页面中旋转这些通常是矩形的图像的方法。

背景

如果您需要关于 HTML5 画布旋转功能的介绍，可以查看以下链接：http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial/

使用代码

我开始构建一个基本的 HTML 文档，包含一个图像元素 myImage 和一个画布元素 myCanvas

<!DOCTYPE html>
<html>
<body>

<p>Image:</p>
<img id="myImage" width="220" height="277" src="myimage.jpg" alt="myImage">

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script> ... </script>
</body>
</html>

在脚本中，我有以下代码

<script>

window.onload = function() {
    var c = document.getElementById("myCanvas");
    var img = document.getElementById("myImage");
  
    //canvas must be squared and take the bigger size width or height
    var cnvsSize;
    if (img.width > img.height)
          {
              cnvsSize = img.width;
              isHorizontal = true;        
          }
          else
            {
              cnvsSize = img.height;
              isHorizontal = false;
            }
        c.width=cnvsSize;
        c.height= cnvsSize;
        
        var ctx = c.getContext("2d");
        ctx.clearRect(0,0,c.width,c.height);
                
        //go to the center of the canvas and rotate
        ctx.translate(c.width/2,c.height/2);
        ctx.rotate(90*Math.PI/180);
        
        //default x and y to draw
        var Y = -cnvsSize/2;
        var X = -cnvsSize/2;
        
        //calculate the x and y for the image to be drawn
        if (isHorizontal){
        Y = (- img.height)/2;
        }
        else{
        X = (- img.width)/2;
        }
                
        ctx.drawImage(img,X,Y);
        
        //a temporary squared image
        var imgSquared = new Image();
   
        //take the data of the squared image
        imgSquared.src = c.toDataURL("image/jpg");     
              
        
        imgSquared.onload = function() {
        
          //resize the canvas to the oposite to the original image
          c.width= img.height;
          c.height= img.width;           
           
           //source is my squared image
           if (isHorizontal)
           {
             var sourceX = (cnvsSize - c.width)/2;
             var sourceY = 0;
            }
            else 
            {
             var sourceX = 0;
             var sourceY = (cnvsSize - c.height)/2;           
            }
              
            var sourceWidth = c.width;
            var sourceHeight = c.height;
   
            //destination is canvas resized
            var destX = 0;
            var destY = 0;
            var destWidth = c.width;
            var destHeight = c.height;
        
            ctx.clearRect(0,0,c.width,c.height);

            ctx.drawImage(imgSquared,sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
            
            imgSquared = null;
        };
}
</script>

因此，在从文档中检索 MyCanvas 和 MyImage 之后，我将画布调整为正方形，取图像的较大尺寸（宽度或高度）。

之后，我检索上下文并清除画布的整个矩形（实际上是一个正方形）。
接下来，我将 (0,0) 坐标平移到画布的中心并进行旋转。

接下来，我计算应该绘制图像的位置。默认情况下，应该减去画布大小的一半（考虑到我们是从画布中心开始的）。
考虑到图像是水平还是垂直，这些坐标可以更小，只需减去图像大小的一半即可。
计算出坐标后，图像就被绘制出来了。

接下来，我创建一个临时图像来保存画布上的正方形图像。
在该图像的 onload 事件中，画布被调整为旋转图像所需的尺寸（宽度变为原始图像的高度，高度变为原始图像的宽度）。
为了将临时图像绘制到调整大小后的画布上，我必须计算要在目标画布的 x, y, 宽度和高度中绘制的图像源的 x, y, 宽度和高度。
根据图像的尺寸（水平或垂直），需要从临时图像中留出一定的边距。为此，我将原始画布大小与当前大小进行比较 (cnvsSize - c.height)/2。

最后，上下文清除画布的矩形，图像再次绘制出来……旋转成功了！！

关注点

画布看起来功能强大，只需要一些耐心来理解它的工作原理。

历史

在此处保持您所做的任何更改或改进的实时更新。