Skip to content

Commit 8da604b

Browse files
EscapedGibbonEscapedGibbon
committed
docs: resolve conversations
1 parent 86dc5b4 commit 8da604b

File tree

6 files changed

+140
-13
lines changed

6 files changed

+140
-13
lines changed

‎.github/workflows/nodejs.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@ jobs:
1414
npm-test-command: npm run build
1515
node-version-matrix: '[18]'
1616
upload-coverage: false
17+
disable-test-package: true

‎docs/Features/Geometry/Geometry.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ Geometric operations in image processing involve transforming the spatial coordi
88

99
### Methods
1010

11-
| Can be applied on | Images | Masks |
12-
| -------------------------------------------------------------------------------------------------------- | ------- | -------- |
13-
| [Flip(`flip`)](./Flip.md 'internal link on flip') | ✅ | ❌ |
14-
| [Resize(`resize`)](./Resize.md 'internal link on resize') | ✅ | ❌ |
15-
| [Rotate(`rotate`)](./Rotate.md 'internal link on rotate') | ✅ | ❌ |
16-
| [Transform(`transform`)](./Transform.md 'internal link on transform') | ✅ | ❌ |
17-
| [Transform and rotate(`transformRotate`)](./Transform%20and%20Rotate 'internal link on transformRotate') | ✅ | ❌ |
11+
| Can be applied on | Images | Masks |
12+
| --------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- |
13+
| [Flip(`flip`)](./Flip.md 'internal link on flip') | ✅ | ❌ |
14+
| [Resize(`resize`)](./Resize.md 'internal link on resize') | ✅ | ❌ |
15+
| [Rotate(`rotate`)](./Rotate.md 'internal link on rotate') | ✅ | ❌ |
16+
| [Transform(`transform`)](./Transform.md 'internal link on transform') | ✅ | ❌ |
17+
| [Transform and rotate(`transformRotate`)](./Transform%20and%20Rotate 'internal link on transformRotate') | ✅ | ❌ |
18+
| [Get perspective warp matrix(`getPerspectiveWarp`)](./Get%20Perspective%20Warp%20Matrix.md 'internal link on getPerspectiveWarp') | - | - |

‎docs/Features/Geometry/Get Perspective Warp Matrix.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
sidebar_position: 41
3+
---
4+
5+
# Get perspective warp matrix
6+
7+
_Returns a perspective transformation matrix from source points that transforms a quadrilateral._
8+
9+
`getPerspectiveWarp` function takes 4 corner points (source quadrilateral) and then calculates the 3×3 perspective transformation matrix that allows removing [perspective distortion](https://en.wikipedia.org/wiki/Perspective_distortion).
10+
The function also returns width and height of the new image.
11+
If they were put as option's parameters it just returns indicated width and height, otherwise it calculates new width and height from given source points.
12+
13+
### Basic use case
14+
15+
```ts
16+
const image = readSync('path/to/file.png');
17+
// Define source corners (original image points) and destination image width and height.
18+
// In this case they correspond to credit card's corner points.
19+
const sourcePoints = [
20+
[
21+
{ column: 55, row: 140 },
22+
{ column: 680, row: 38 },
23+
{ column: 840, row: 340 },
24+
{ column: 145, row: 460 },
25+
],
26+
{ width: 725, height: 425 },
27+
];
28+
29+
// Get transformation matrix using 4 points and `getPerspectiveWarp` function.
30+
const projectionMatrix = getPerspectiveWarp(sourcePoints);
31+
const projectedImage = image.transform(matrix.matrix, {
32+
width: matrix.width,
33+
height: matrix.height,
34+
inverse: true,
35+
});
36+
```
37+
38+
![Basic use case of perspectiveWarp](./images/cardPerspective.png)
39+
40+
### Parameters and default values
41+
42+
- `sourcePoints`
43+
44+
- `options`
45+
46+
#### Options
47+
48+
| Property | Required | Default value |
49+
| -------------------------------------------------------------------------------------------------- | -------- | ------------- |
50+
| [`width`](https://image-js.github.io/image-js-typescript/interfaces/ResizeOptions.html#borderType) | no | - |
51+
| [`height`](https://image-js.github.io/image-js-typescript/interfaces/ResizeOptions.html#height) | no | - |

‎docs/Features/Geometry/images/cardPerspective.png‎

288 KB
Loading

‎docs/Tutorials/Applying transform function on images.md‎

Lines changed: 79 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,72 @@ In a broader sense of the term, image transformation refers to the process of mo
22

33
In ImageJS, however, `transform()` function does transformations that can be accomplished through [matrix multiplication](https://en.wikipedia.org/wiki/Matrix_multiplication).
44

5-
In this tutorial we will cover and explain basic transformation techniques as well as explain how `transform()` function allows us to modify images.
5+
In this tutorial we will cover and explain basic geometric transformation techniques as well as explain how `transform()` function allows us to modify images.
6+
7+
## How image transformations work
8+
9+
[Geometric transformation](https://www.geeksforgeeks.org/electronics-engineering/geometric-transformation-in-image-processing-1/) modifies the location of pixels in an image. It consists of two main steps:
10+
11+
- Spatial transformation of pixels or coordinates and intensity interpolation.
12+
- Intensity interpolation is used to assign the intensity value of pixels after spatial transformation.
13+
14+
In a geometric transformation a pixel at coordinate $$(x, y)$$ will be moved to coordinate $$(x', y')$$. That is the coordinate (x', y') of the output image which will have the intensity value of the coordinate (x, y) in the input image.
15+
16+
In this tutorial we will focus more on spatial transformation and talk more about interpolation another time. Basic geometric transformation is given by the equation in matrix form:
17+
18+
$$
19+
\begin{bmatrix}
20+
x' \\
21+
y' \\
22+
z'
23+
\end{bmatrix} = A \begin{bmatrix}
24+
x \\
25+
y \\
26+
z\end{bmatrix}
27+
=\begin{bmatrix}
28+
a & b & c\\
29+
d & e & f \\
30+
g & h & i\\
31+
\end{bmatrix}
32+
\begin{bmatrix}
33+
x \\
34+
y \\
35+
z
36+
\end{bmatrix}
37+
$$
38+
39+
where
40+
41+
- $$(x, y,z)$$ is the input coordinate
42+
- $$(x', y',z')$$ is the output coordinate
43+
- $$A$$ is the affine transformation matrix
44+
45+
:::note
46+
47+
### Example of matrix multiplication
48+
49+
If you are interested to look a bit deeper into matrix multiplications, take a look at the [`ml-matrix`](https://mljs.github.io/matrix/index.html 'link on ml-matrix api') package.
50+
It facilitates basic matrix operations in ImageJS, as well as something more advanced like inverting a matrix.
51+
Here is a basic demo on how to upscale a pixel coordinate by 2 using `ml-matrix` library.
52+
53+
```ts
54+
import { Matrix } from 'ml-matrix';
55+
56+
const matrix = new Matrix([[10], [10], [1]]);
57+
58+
const transform = new Matrix([
59+
[2, 0, 0],
60+
[0, 2, 0],
61+
[0, 0, 1],
62+
]);
63+
64+
const result = transform.mmul(matrix);
65+
/*
66+
gives [20,20,1] as a new coordinate of a pixel.
67+
*/
68+
```
69+
70+
:::
671

772
## Types of transformation
873

@@ -80,6 +145,11 @@ const stretchedImage = image.transform(transformationMatrix);
80145

81146
![Stretched image](./images/transformations/lennaStretched.png)
82147

148+
:::note
149+
ImageJS also has [`resize`](../Features/Geometry/Resize.md) function that allows to scale an image.
150+
Current tutorial just demonstrates the basic principle behind transformation of such kind.
151+
:::
152+
83153
#### Common Scaling Examples
84154

85155
```ts
@@ -114,6 +184,10 @@ const flippedImage = image.transform(flipMatrix);
114184
```
115185

116186
![Flipped image](./images/transformations/lennaFlipped.png)
187+
:::note
188+
ImageJS also has [`flip`](../Features/Geometry/Flip.md) function that allows to flip an image.
189+
Current tutorial just demonstrates the basic principle behind transformation of such kind.
190+
:::
117191

118192
### Translation
119193

@@ -225,9 +299,8 @@ return image.transform(matrix);
225299
![Rotated by center image](./images/transformations/lennaRotatedCenter.png)
226300

227301
:::note
228-
Image-js also has `rotate()` and `transformRotate()` functions. `rotate()` function allows rotating an image by multiple of 90 degrees.
302+
Image-js also has [`rotate()`](../Features/Geometry/Rotate.md) and [`transformRotate()`](../Features/Geometry/Transform%20and%20Rotate.md) functions. `rotate()` function allows rotating an image by multiple of 90 degrees.
229303
`transformRotate()` allows rotating an image by any degree. It also allows choosing the axe of rotation. So, for rotation, you have other functions that allow you to perform it.
230-
Current tutorial just demonstrates the basic principle behind transformation of such kind.
231304
:::
232305

233306
## Projective Transformations
@@ -286,9 +359,9 @@ const sourcePoints = [
286359

287360
// Get transformation matrix using 4 points and `getPerspectiveWarp` function.
288361
const projectionMatrix = getPerspectiveWarp(sourcePoints);
289-
const projectedImage = image.transform(matrix.matrix, {
290-
width: matrix.width,
291-
height: matrix.height,
362+
const projectedImage = image.transform(projectionMatrix.matrix, {
363+
width: projectionMatrix.width,
364+
height: projectionMatrix.height,
292365
inverse: true,
293366
});
294367
```

‎project-words.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,4 @@ electrometric
3030
Grayscaling
3131
Avgs
3232
Collinearity
33+
mmul

0 commit comments

Comments
 (0)