Html画布自由变换

Question

我正在尝试将画布元素中的非均匀部分图像转换为适当的矩形（即，像在Photoshop中拍摄图像的非矩形部分并使用Distort使其成为矩形），但我正在使用难以理解Canvas Matrix Transforms。

在理解如何实现这一目标方面，我不是在追求代码，只是朝着正确方向迈出的一步。

干杯

更新1：Incase我的解释不够http://i.imgur.com/QTB6q.png

更新2：这些框是照片中添加到画布中的区域，基本上是裁剪和拉直图像的一部分。

Answer 1

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