JavaScript - 旋转 Canvas 图像， Angular 被剪掉

Question

我正在尝试旋转 HTML canvas 内的图像。旋转确实有效，但是，每次旋转一次，图像的 Angular 都会被切掉/剪掉。这是错误的，因为旋转后整个上传的图像应该是完整的。

一些重要细节:

• 在我的特定用例中，我无权访问图像数据本身。因此，用户上传的图像将被处理并绘制在 HTML Canvas 上。我只能访问 HTML canvas 元素，而不能访问上传的图像本身。这就是系统的工作原理。
• Canvas 的宽度和高度应与上传图片的宽度和高度完全相同
• Canvas 本身应保持其尺寸且不应旋转，仅应旋转其中的图像。
• 无 CSS，只能使用 JavaScript 存档，因为旋转的 Canvas 图像将上传到服务器。

所以这里的问题是，每次我想将图像旋转 45 度时，HTML Canvas 内图像的 Angular 都会被剪掉/剪掉。显然这是不正确的，因为整个图像应该旋转。我不知道我做错了什么，所以也许有人可以进一步帮助我？

https://jsfiddle.net/d5zurxq2/

<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<canvas id="imageCanvas" width=250 height=250></canvas>
<br /><br /><br />
<button type="button" id="rotateLeft">Rotate 45 degrees left</button>


#imageCanvas {
  width: 350px;
  height: 250px;
  background-color: rgba(158, 167, 184, 0.2)
}

var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);


var canvas  = document.getElementById('imageCanvas');
var ctx     = canvas.getContext("2d");


function handleImage(e){
  var reader            = new FileReader();
  reader.onload         = function(e) {
      var preview       = document.createElement('img');
      preview.onload    = function()
      {
          canvas.width  = preview.width;
          canvas.height = preview.height;
          canvas.getContext('2d').drawImage(preview, 0, 0);
      };

      preview.src = reader.result;
    };

   reader.readAsDataURL(e.target.files[0]);     
}



document.getElementById('rotateLeft').addEventListener('click', rotateImage, 
false);

function rotateImage() {
  var w     = ctx.canvas.width;
  var h     = ctx.canvas.height;
  var ww    = w / 2;
  var hh    = h / 2;

  ctx.save();
  ctx.globalCompositeOperation = "copy";
  ctx.translate(ww, hh);
  ctx.rotate((Math.PI / 180) * 45);
  ctx.drawImage(canvas, -canvas.width/2, -canvas.height/2);
  ctx.restore();
}

Answer 1

这两种说法是矛盾的。

The canvas width and height should be exact the same as the width & height of the uploaded image.

The canvas itself should maintain its dimensions and should not be rotated, only the image in it should be rotated.

增加 Canvas 的大小。如果将图像旋转 45 度，则需要更大的 Canvas 。

现在，您将 Canvas 大小设置为图像大小。但是，旋转图像不会旋转 Canvas ，这就是边缘被切断的原因。

这是一个 Canvas (蓝色)，其中有一个图像(黄色)，尺寸完全相同，但以 45 度 Angular 绘制。突出的图像边缘不会被绘制...因为它们不在 Canvas 上。

增加 Canvas 大小以弥补图像旋转。我建议计算图像的对 Angular 线长度并将其设置为 Canvas 的宽度和高度，这样无论您如何旋转它，它都会适合。

类似这样的事情:

  let diagonalLength = Math.sqrt(
    Math.pow(preview.width,2)+Math.pow(preview.height,2)    
  );
  canvas.width  = diagonalLength;
  canvas.height = diagonalLength;