Question

我试图在HTML canvas中旋转图片。旋转确实有效，但是，每个旋转时间，图像的角都被剪切/剪掉。这是错误的，因为旋转后整个上传的图像应该是完整的。

一些重要细节：

在我的特定用例中，我无法访问图像数据本身。因此，将在HTML画布上处理和绘制用户上载的图像。我只能访问HTML canvas元素，而不是上传的图像本身。这就是系统的工作方式。
画布的宽度和高度应与宽度和宽度完全相同。上传图片的高度
画布本身应保持其尺寸，不应旋转，只应旋转其中的图像。
没有CSS，只能用JavaScript来实现，因为旋转的画布图像将被上传到服务器。

所以问题在于，每次我想将图像旋转45度时，HTML画布内的图像角都会被剪切/剪切掉。显然这是不正确的，因为整个图像应该旋转。我无法弄清楚我做错了什么，所以也许有人可以帮我进一步？

<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

这两个陈述是矛盾的。

画布的宽度和高度应与宽度和宽度完全相同。   上传图片的高度。

画布本身应该保持它的   尺寸，不应旋转，只应在其中的图像   转动。

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

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

这是一个画布（蓝色），图像（黄色）完全相同，但以45度角绘制。伸出的图像边缘不会被绘制......因为它们不在画布上。

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

这样的事情：

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

Answer 2

您可以使用Canvate库执行此操作。

http://www.sakuracode.com/canvate

您可以根据需要加载所有图像，并将它们作为单个剪辑进行处理。您也可以设置旋转点。在这种情况下在中间。

你需要这样的东西吗？

function rotateImage() {
        clip.rotation = 45;
        clip.fitInto(canvas.width, canvas.height);
    }

https://codepen.io/EiseiKashi/pen/aGjbWK

如有任何疑问，请告诉我们！

JavaScript - 旋转画布图像，角落被剪掉

2 个答案: