9

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:

enter image description here

How to fix this type of image with javascript?

b24
  • 2,425
  • 6
  • 30
  • 51
  • `canvas` may have the tools required to manipulate an image - but wait, you flagged it node.js, so there is no browser goodness available - you'll need something pretty intelligent, it has to detect issues and fix them with no user interaction – Jaromanda X Nov 02 '15 at 04:44
  • This is either wa-a-a-ay too broad for Stack Overflow, or you're asking for something already made that can do this which is off-topic for Stack Overflow. –  Nov 02 '15 at 22:16
  • @JaromandaX , Yes I need a way that work without user interaction. – b24 Nov 03 '15 at 12:13
  • 1
    Realize [my algorithm](http://stackoverflow.com/questions/21643692/calculating-rectangle-3d-coordinate-with-coordinate-its-shadow) on java . Calculate quaternion then rotate image. Any question - ask – Ivan.s Jan 18 '16 at 21:17
  • I desperately need that too!!! Did you figure out how to do it? – Diego Pamio Apr 19 '16 at 03:20
  • Hi everyone I have done it, please check my answer below ,let me know if I need any improvements – OnlyJS Nov 16 '19 at 18:19

3 Answers3

4

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

perspective correction javascript

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);
OnlyJS
  • 297
  • 3
  • 4
  • I tried to use your sample code and it seems working with the provided image. But when I changed the image source, somehow it doesn't transform the image as expected (Perspective Transformation). Anything specific required to do or missed something, not sure? – AT-2017 Oct 25 '21 at 03:07
  • OP is asking for automatically fixing the image, while this requires the user to drag the crop handles themselves. – AbyxDev Nov 06 '21 at 21:34
  • It's almost perfect solution, but: a) it's not working automatically like @AbyxDev said b) It's depended from OpenCV - very large and slow (in JS) lib – procek Nov 19 '21 at 20:35
2

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

Adrien Gibrat
  • 917
  • 10
  • 13
1

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.

arminrosu
  • 102
  • 11