How to fix image perspective distortion and rotation with JavaScript?

Question

I have some images that takes using mobile phone. Is there any JavaScript library which can straighten the photo of a paper and flatten it? For example I want to create a rectangular image without any distortion from this image.

In the other words I want to know how to fix perspective distortion and rotation with JavaScript?

For example I found below sample image from this article:

How to fix this type of image with javascript?

Answer 1

Looks like https://www.npmjs.com/package/perspective-transform is what you are looking for.

Create functions to map points from one arbitrary quadrilateral to another and vice versa with the inverse

Answer 2

There is no need of any extra npm package, this can be achieved by creation a irregular crop box, first load the image into a canvas, one should adjust 4 cropping points over image, put the portion into a regular rectangular canvas.

Follow this link for detailed code and steps Image Perspective correction using javascript and opencv

Here is the demo

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 can do that for you. There even is an example for perspective distortion. You'll have to add/compute the source and destination points yourself.