You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We're excited to announce the release of image-js-typescript, a complete rewrite of the popular image-js library. This new version brings modern TypeScript support and a more intuitive API while maintaining the powerful image processing capabilities you love.
8
+
We're excited to announce the release of image-js-typescript, a complete rewrite of the popular image-js library. This new version brings TypeScript support and a more intuitive API while maintaining the powerful image processing capabilities you love.
10
9
11
-
## ⚠️ API Changes
10
+
<!--- truncate --->
12
11
13
-
### Stricter typing
12
+
#API Changes
14
13
15
-
```js
16
-
// Before
17
-
constpixel=img.getPixel(x, y); // any[]
18
-
19
-
// After
20
-
constpixel=img.getPixel(x, y); // number[] with proper typing
21
-
```
14
+
## ⚠️ Breaking changes
22
15
23
16
### Changed the way images are loaded and created
24
17
25
-
Static method `load` for reading and writing images has been replaced with dedicated functions `read` and `write`. There are also synchronous versions of these functions.(add more explanation)
18
+
Static method `load` for reading and method `save` for writing images have been replaced with dedicated functions `read` and `write`.
26
19
27
20
```ts
28
-
javascript; //Before
21
+
//Before
29
22
import { Image } from'image-js';
30
23
const img =awaitImage.load('cat.jpg');
24
+
img.save('newCat.jpg');
31
25
```
32
26
33
27
```ts
34
-
// After
35
-
import { readSync, read } from'image-js';
28
+
//After
29
+
import { read, write } from'image-js';
30
+
const img2 =awaitread('cat.jpg');
31
+
awaitwrite('newCat.jpg', img);
32
+
```
33
+
34
+
There are also synchronous versions of these functions.(add more explanation)
35
+
36
+
```ts
37
+
import { readSync, writeSync } from'image-js';
36
38
const img =readSync('cat.jpg');
37
-
// or
38
-
const img =awaitread('cat.jpg');
39
+
writeSync('newCat.jpg', img);
39
40
```
40
41
42
+
The new approach allows for better TypeScript inference, smaller bundle sizes through tree-shaking, and clearer API design where I/O operations are separate from image manipulation.
43
+
41
44
### Distinction between Image and Mask objects
42
45
43
-
In the new version of ImageJS binary images(masks) becomes a separate class.
46
+
Binary images are now handled by a dedicated Mask class instead of Image with `kind: 'BINARY'`.
In previous versions binary images (masks) had 8 pixels of data stacked in one byte.The new version changes that. Now Masks' data reserves 1 byte per pixel.
56
-
It improves and facilitates data readability and editing.
58
+
Dedicated Mask class provides better type safety, clearer API, and optimized performance for binary operations.
59
+
60
+
The new Mask class uses 1 byte per pixel (vs 8 pixels per byte), trading ~8x memory usage for significantly faster bit operations and simpler data manipulation.
61
+
62
+
### Modification of Sobel and Scharr filters
63
+
64
+
[Sobel](https://en.wikipedia.org/wiki/Sobel_operator),[Scharr](https://en.wikipedia.org/wiki/Sobel_operator#Alternative_operators) filters are now combined into a single `derivative()` method.
This filter also now accepts only grayscale images, since filters like sobel or scharr are used mainly on grayscale images to detect edges.
77
+
78
+
### Enhanced TypeScript Support
79
+
80
+
All APIs now have strict TypeScript definitions:
81
+
82
+
```ts
83
+
ts; // Before: loose typing
84
+
const pixel =img.getPixel(x, y); // any[]
85
+
86
+
// After: strict typing
87
+
const pixel =img.getPixel(x, y); // number[] with proper channel count
88
+
```
89
+
90
+
### Method Renaming
91
+
92
+
Several methods have been renamed for consistency:
93
+
94
+
**Drawing methods**:
95
+
96
+
img.paintPolyline() → img.drawPolyline()
97
+
img.paintPolygon() → img.drawPolygon()
98
+
img.paintCircle() → img.drawCircle()
99
+
100
+
**Other methods**:
57
101
58
-
### New features
102
+
img.copy() → img.clone()
103
+
img.clearBit() → img.setBit()
104
+
img.getLocalMaxima() → img.getExtrema()
105
+
img.getChannel() → img.extractChannel()
59
106
60
-
- Bicubic interpolation has been added as interpolation option
61
-
- Canny Edge Detector filter has been added
62
-
-`transform` function now accepts 3x3 matrices as well as 2x3
63
-
-`warpingFourPoints` function has been deprecated and now `getPerspectiveWarp` returns a matrix that can be used in a new `transform()` function.
107
+
Consistent naming follows common conventions (draw\* for rendering, clone for copying objects).
64
108
65
-
### Refactored functions
109
+
## 🆕 New Features
110
+
111
+
### `transform()` function
112
+
113
+
The `transform` function allows applying transformation matrix on the image. Which means that the image can now be translated or sheared or warped based on the matrix that the user entered. `transform()` function accepts both 2x3 and 3x3 matrices, depending on whether you want an affine transformation or a perspective one.
114
+
115
+
```ts
116
+
const matrix =getPerspectiveWarp(sourcePoints);
117
+
const warped =img.transform(matrix);
118
+
```
119
+
120
+
For more details visit our [tutorial](../docs/Tutorials/Applying%20transform%20function%20on%20images) on how image transformations work.
121
+
122
+
### Bicubic Interpolation
123
+
124
+
High-quality image scaling is now available with [bicubic interpolation](https://en.wikipedia.org/wiki/Bicubic_interpolation):
**Use case**: Better quality when upscaling images, especially for photographs.
131
+
132
+
### Canny Edge Detection
133
+
134
+
[Canny Edge Detector](../docs/Features/Morphology/Canny%20Edge%20Detector) is an advanced edge detection filter for computer vision applications:
135
+
136
+
```ts
137
+
const edges =img.cannyEdgeDetector({
138
+
lowThreshold: 50,
139
+
highThreshold: 150,
140
+
});
141
+
```
142
+
143
+
**Use case**: Object detection, image segmentation, feature extraction. You can learn more about it [here](../docs/Features/Morphology/Canny%20Edge%20Detector.md).
144
+
145
+
### Prewitt filter
146
+
147
+
[Prewitt](https://en.wikipedia.org/wiki/Prewitt_operator) filter has been added to the `derivative()` filter.
**Use case**: Object detection, image segmentation, feature extraction. You can learn more about it [here](../docs/Features/Morphology/Morphological%20Gradient).
154
+
155
+
### Migration from deprecated methods:
156
+
157
+
`warpingFourPoints` function has been deprecated.Now you have [`getPerspectiveWarp`](../docs/Features/Geometry/Get%20Perspective%20Warp%20Matrix) function that returns a matrix that can be applied on an image of interest in a new `transform` function.
158
+
159
+
```ts
160
+
// Before
161
+
const warped =img.warpingFourPoints(corners);
162
+
163
+
// After
164
+
const matrix =getPerspectiveWarp(corners);
165
+
const warped =img.transform(matrix);
166
+
```
66
167
67
-
Several methods have been renamed. Some notable changes:
168
+
**Use case**: Rectification of a perspective angle of an image. You can learn more about it [here](../docs/Features/Geometry/Get%20Perspective%20Warp%20Matrix).
68
169
69
-
-`paint*` methods(`drawPoligon()`, `paintPolyline()` etc.) are now `draw\*` methods(`drawPolyline()`,`drawPoligon()` etc.).
0 commit comments