Given a background photo, this tool allows you to draw lines on top of it whose relative lengths in pixel are shown. Double-clicking on a line allows you to set a 'reference size', all the other numbers are adjusted accordingly.
Use this for instance by taking a picture of something with a ruler in the same focus; use the ruler to set a reference size and now you have correct measurements for the other parts in the picture.
In this example, we mark a known distance (40mm) so that we can get the value
for the distance to be measured (12.70mm).
Basic UI:
- Open augenmass.html in your browser.
- Choose background image file. (Nothing is uploaded anywhere, this is just used locally by your browser).
- Draw lines on top of your background image. First click first point, second click second point. ESC key if you want to cancel the current line.
- The loupe shows a magnified view of the area the mouse cursor is covering.
- Double-click on a number to enter some value. The other lines are automatically re-calculated according to that factor.
- Right-click to either abort the current line or delete the closest line.
- If you start the line exactly where another one stopped, the angle between the
lines is indicated. The loupe functionality will help you match the points.
- You can download the result as transparent overlay PNG image.
(Note, I don't really know JavaScript, this is essentially my first JavaScript experiment. if you see things to improve, just send me a pull request. See also TODOs for inspiration).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent