有没有更有效的坐标变换方法？

Question

我在画布上有一张图片，我想对其进行梯形失真。代码本身已经准备好了，但是很慢，很慢。在 i7 台式机上，约 10-20 秒内可显示 400x400 图像。但是，我想在具有最大相机分辨率的移动设备上运行它，所以我正在寻找一种更有效的方法。 目前，我的代码是这样工作的：

1. 向用户请求扭曲矩形的坐标。我需要从用户那里得到正交坐标
2. 我将边 a 和 c 分成 400 个部分。
3. 我迭代了之前的划分，所以我取“a”边 1/400 部分的点和“c”边 1/400 部分的点。然后是 2/400 部分上的点之间的部分。等等。
4. 我将刚刚生成的部分除以 400 并对其进行迭代。
5. 我将点 2 中产生的行号作为“X”，将点 4 中的点作为“Y”。给定点的坐标是 Q 和 W。
6. 我将原始画布上坐标“Q”和“W”处的像素绘制到目标画布上由坐标“X”和“Y”标识的位置。

有没有更有效的方法来做到这一点？

Answer 1

由于您本质上是在像素级别上操作，所以事情必须非常缓慢。最快的方法是利用 WebGL 并将计算外包给片段着色器。不过，在这种情况下，这可能有点矫枉过正。如果您只想从透视角度转换图像，那么有一个现成的小型库 - 虽然不如像素级别那么精确 - 可能会满足您的需求，称为 perspective.js

你所要做的就是给它一个图像和你想要的四个角点。

这是一个例子：

let canvas = document.getElementById("canvas");
let image = new Image();
image.onload = function() {
  let ctx = canvas.getContext("2d");
  let p = new Perspective(ctx, image);

  p.draw([
    [65,43],
    [266, 16],
    [304,251],
    [26,151]
  ]);
}
image.src = "https://picsum.photos/id/1079/200/300";

canvas {
  border: gray solid 1px;
}

<script src="https://cdn.rawgit.com/wanadev/perspective.js/master/dist/perspective.min.js"></script>
<canvas id="canvas" width="400" height="300"></canvas>