javascript - Html Canvas 自由变换

Question

我正在尝试将 Canvas 元素中图像的非均匀部分转换为适当的矩形(即，就像在 Photoshop 中获取图像的非矩形部分并使用扭曲使其成为矩形)，但是我有难以理解 Canvas 矩阵变换。

我并不是在追求代码，只是在理解如何实现这一目标方面找到了正确的方向。

干杯

更新1:以防万一我解释得不够好/image/mGZX5.png

更新 2:这些框是添加到 Canvas 的照片内的区域，本质上是我裁剪并拉直图像的一部分。

Answer 1

在 html5 canvas 中，您只能应用 affine transformations使用 transform 或 setTransform() 方法，因此您需要知道已经应用的矩阵是什么，并使用逆矩阵使其看起来像正方形区域，以进行其他转换(非仿射)，需要一些数学知识(我没有)，创建或搜索 Canvas API 的实现(仅适用于仿射变换)。