html5-canvas - 使用画布调整图像尺寸并旋转 90 度

Question

var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var width = 0;
      var height = 0;
      var diagonal = 0;
      var image = new Image();
      image.crossOrigin = 'Anonymous';
      image.src = `source url`;
      image.onload = () => {
        width = image.naturalHeight;
        height = image.naturalWidth;
        diagonal = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
        ctx.canvas.height = diagonal;
        ctx.canvas.width = diagonal;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(diagonal / 2, diagonal / 2);
        ctx.rotate((0 * Math.PI) / 180);
        ctx.drawImage(image, -width / 2, -height / 2);
        ctx.restore();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(diagonal / 2, diagonal / 2);
        ctx.rotate((90 * Math.PI) / 180);
        ctx.save();
        canvas.height = image.height;
        canvas.width = image.width;
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        ctx.restore();
        console.log(canvas.toDataURL("image/jpeg"))
      };

<canvas id="canvas"></canvas>

我有一张尺寸为 1200x900 的图像。我想将它顺时针旋转 90 度，旋转后再次将其尺寸更改为 1200*900。如何使用 HTML5 的画布做到这一点。

我在这里附上图片。

我希望目标图像的大小为 1200x900。请让我知道，如何做到这一点。

标签： html5-canvas

Answer 1

我没有看到您计算高度和宽度之间比率的任何地方......
我们计算它并在我们的应用中使用它drawImage来减小尺寸。

...请参阅下面的示例：
_{我将画布大小保持为原始图像以在背景中显示它}

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


var image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
image.onload = () => {
  canvas.height = image.naturalHeight;
  canvas.width = image.naturalWidth;
  
  // original image
  ctx.globalAlpha = 0.2;
  ctx.drawImage(image, 0, 0);  
  ctx.rect(0, 0, canvas.width, canvas.height);
  ctx.fill()
  
  // rotated image
  ctx.save();
  ctx.globalAlpha = 1;
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(Math.PI / 2);
  let ratio = canvas.height/canvas.width
  ctx.drawImage(image, -canvas.height / 2, -canvas.width / 2, canvas.width/ratio, canvas.width);
  ctx.restore();
};

<canvas id="canvas"></canvas>

我不确定你的对角线计算需要什么，所以我只是删除了它和其他不相关的东西......在未来的问题中，如果你能解释你的逻辑，我们可以更好地回应你的方法出错的地方/地方

---

您可以将相同的逻辑用于其他类似的转换......
这是另一个代码示例：

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


var image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
image.onload = () => {
  canvas.height = canvas.width = Math.max(image.naturalWidth, image.naturalHeight);
  
  // original image
  ctx.globalAlpha = 0.2;
  ctx.drawImage(image, 0, 0);  
  ctx.rect(0, 0, image.naturalWidth, image.naturalHeight);
  ctx.fill()
  
  // rotated image
  ctx.save();
  ctx.globalAlpha = 1;
  ctx.translate(image.naturalHeight / 2, image.naturalWidth / 2);
  ctx.rotate(Math.PI / 2);
  ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
  ctx.restore();
};

<canvas id="canvas"></canvas>