javascript - 如何使用 JavaScript 修复图像透视变形和旋转？

Question

我有一些使用手机拍摄的图像。是否有任何 JavaScript 库可以拉直纸张的照片并将其展平？例如，我想创建一个矩形图像，而该图像没有任何失真。

换句话说我想知道如何用 JavaScript 修复透视扭曲和旋转？

例如，我在下面的示例图片中找到了 this文章:

如何用 javascript 修复这种类型的图像？

Answer 1

不需要额外的npm包，创建一个不规则的裁剪框就可以实现，首先将图像加载到 Canvas 中，在图像上调整4个裁剪点，将部分放入一个规则的矩形 Canvas 中。

点击此链接获取详细代码和步骤 Image Perspective correction using javascript and opencv

这是演示

let dst = new cv.Mat();
let dsize = new cv.Size(imageHeight, imageWidth);
let srcTri = cv.matFromArray(4, 1, cv.CV_32FC2, pointsArray);
let dstTri = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, imageHeight, 0, imageHeight, imageWidth, 0, imageWidth]);
let M = cv.getPerspectiveTransform(srcTri, dstTri);
cv.warpPerspective(src, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());
document.getElementById('imageInit').style.display = "none"
cv.imshow('imageResult', dst);