时间戳

首页 > 解决方案 > 我的图像在旋转时没有占据画布的整个宽度

javascript - 我的图像在旋转时没有占据画布的整个宽度

问题描述

所以我在画布上玩耍，我尝试旋转从我的设备硬盘加载的图像，如下所示：

class imageEdits {
    constructor(canvas, imageSrc, canvasWidth, canvasHeight) {
        this.canvas = canvas;
        this.ctx = this.canvas.getContext("2d");
        this.image = new Image();
        this.image.src = imageSrc;
        this.cWidth = canvasWidth;
        this.cHeight = canvasHeight;
    }

    rotateImage = deg => {
        this.ctx.save();

        function degToRad(deg) {
            return (1 / 57.3) * deg;
        }

        let imageHeight = this.image.naturalHeight,
            imageWidth = this.image.naturalWidth;

        if (deg !== 0 && deg !== 180) {
            imageHeight = this.image.naturalWidth;
            imageWidth = this.image.naturalHeight;
        } else {
            (imageHeight = this.image.naturalHeight),
                (imageWidth = this.image.naturalWidth);
        }
        const {
            canvasStyle: { height, width, scale, aspectRatio },
        } = this.computeAspectRatio(imageHeight, imageWidth);
        console.log({ height, width, scale, aspectRatio });
        const halfWidth = width / 2;
        const halfHeight = height / 2;
        this.ctx.translate(halfWidth, halfHeight);

        this.ctx.rotate(degToRad(deg));
        this.canvas.style.transform = `scale3d(${scale}, ${scale}, 1)`;
        this.canvas.style.backgroundColor = "rgb(0,0,0)";
        this.canvas.style.transformOrigin = `top left`;
        console.log({ width, height });
        this.ctx.drawImage(this.image, -halfWidth, -halfHeight, width, height);

        this.ctx.restore();
    };

    computeAspectRatio = (imageHeight, imageWidth) => {
        const height = imageHeight;
        const width = imageWidth;

        (scale = 1), (canvasStyle = {});

        this.canvas.width = width;
        this.canvas.height = height;

        const scaleX = this.cWidth / width;
        const scaleY = this.cHeight / height;

        if (scaleX > scaleY) scale = scaleY;
        else scale = scaleX;

        canvasStyle = { height, width, scale };

        return { canvasStyle };
    };
}

代码的问题在于，当我将图像旋转到其纵横比的倒数（即 180 度的 90 度）时，图像会居中并且不会像画布那样采用全宽或全高。

这是工作代码的jsfiddle

这就是我的预期输出应该是什么样子

但相反，这就是我得到的

请问有人看到我做错了吗？提前致谢 ：）

标签： javascripthtml5-canvas

解决方案

一般来说，围绕中心的旋转是通过将上下文转换到画布的中点、旋转上下文并最终在水平宽度的负一半和垂直高度的负一半绘制图像来完成的。

在您的情况下，让事情变得更难的是图像应该始终填满整个画布，同时保持正确的纵横比。为此，我们需要知道图像在给定角度的确切宽度和高度——或者更准确地说，它是边界框。幸运的是，我们只需要处理四个角度，因此只需将宽度和高度交换为 90° 和 270° - 正如您已经做过的那样。

现在我们知道了图像的尺寸，我们需要计算沿两个轴的比例，并查看其中哪一个在相乘后不超过画布宽度和高度。

然后使用此比例来缩放上下文 - 而不是用于调整画布本身大小的 css 比例。

这是一个基于您的代码的示例（只需单击“运行代码片段”）：

const canvas = document.getElementById("edit-canvas");
const ctx = canvas.getContext("2d");
const canvasWidth = 320;
const canvasHeight = 200;

let deg = 0;
let image;

canvas.width = canvasWidth;
canvas.height = canvasHeight;

function degToRad(deg) {
  return (1 / 57.3) * deg;
}

function draw() {
  let scale, imageHeight, imageWidth, scaleX, scaleY;
  if (deg != 0 && deg != 180) {
    imageHeight = image.width;
    imageWidth = image.height;
  } else {
    imageHeight = image.height;
    imageWidth = image.width;
  }
  scaleX = canvasWidth / imageWidth;
  scaleY = canvasHeight / imageHeight;

  if (imageWidth * scaleX <= canvasWidth && imageHeight * scaleX <= canvasHeight) {
    scale = scaleX;
  } else {
    scale = scaleY;
  }

  ctx.save();
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);

  ctx.translate(canvasWidth / 2, canvasHeight / 2);
  ctx.rotate(degToRad(deg));
  ctx.scale(scale, scale);
  ctx.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height);

  ctx.restore();
}

image = new Image();
image.onload = draw;
image.src = "https://picsum.photos/id/1079/300/200";

document.getElementById("rotate").addEventListener("click", () => {
  deg += 90;
  if (deg == 360) deg = 0;

  draw();
});
<div class="canvas-container">
  <input type="button" id="rotate" style="padding: 10px; font-size: 16px; position: absolute" value="Rotate" />
  <canvas id="edit-canvas" style="border: 1px solid #000; margin-left: 10px;background-color: #c1f0c1;"></canvas>
</div>

推荐阅读