Undoing perspectival distortion

I have a lot of photos containing a sign or other rectangular object where I’d like to undo the distortion that comes from having the plane of the camera not exactly parallel to the plane of the rectangle.

I’ve also been wanting to play with Tauri, a framework for creating apps, for a while. So, I decided I’d write an app in Tauri to do this. This was a little bit more of a stretch for me because it was also my first time using React, and I’m still getting my bearings with Rust. The hardest part by far though was getting the transform working correctly.

imageproc provides Projection::from_control_points, which I think ought to do exactly what I need. However, I never quite got it working. Also, poking around in the source code, I notice that it’s dynamically finding an approximate solution.

Oleksandr Kaleniuk‘s “Geometry for Programmers” notes, however, that the problem can be solved statically and symbolically. Using the solution provided by him, I almost immediately got something that works.

I still benefited a lot from imageproc so a big thanks to the authors. It forms the core of the app, such as it is. (And I’m almost surely just misunderstanding how to use Projection::from_control_points; if you know better, I’d love to hear from you.) And a big thanks to Oleksandr Kaleniuk. Also, Tauri is a pleasure to use so a big thanks to that team as well. I found React-Draggable nice to work with so thank to that group as well! And there are lots of other authors I should thank too… I’ll stop here for now though 🙂

You can see my code here: https://github.com/fadend/Squarer. Constructive feedback (and pull requests) welcome as always.

Here’s a pair of example images:

Before:

After:

Tada! I was very happy to get this working.

Some next steps, if I get to them, could be figuring out how to package this as a non-dev executable, adding support for scaling down larger images, connecting the dots with lines in JavaScript to give the user a better idea of what quadrilateral is being selected, ideally augmented with edge snapping/edge detection.