如何使用 JavaScript 修復圖像透視失真和旋轉？

Question

我有一些使用手機拍攝的圖像。 是否有任何 JavaScript 庫可以拉直一張紙的照片並將其展平？ 例如，我想創建一個矩形圖像，而該圖像沒有任何失真。

換句話說，我想知道如何使用 JavaScript 修復透視失真和旋轉？

例如，我從這篇文章中找到了以下示例圖片：

如何用javascript修復這種類型的圖像？

Answer 1

看起來https://www.npmjs.com/package/perspective-transform就是你要找的。

創建函數以將點從一個任意四邊形映射到另一個四邊形，反之亦然

Answer 2

不需要任何額外的 npm 包，這可以通過創建一個不規則的裁剪框來實現，首先將圖像加載到畫布中，調整圖像上的 4 個裁剪點，將部分放入規則的矩形畫布中。

按照此鏈接獲取詳細代碼和步驟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);

Answer 3

JSFeat可以為您做到這一點。 甚至還有一個透視失真的例子。 您必須自己添加/計算源點和目標點。