Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/workflows/nodejs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ jobs:
nodejs:
uses: zakodium/workflows/.github/workflows/nodejs.yml@nodejs-v1
with:
node-version: 22.x
node-version: 24.x
lint-check-types: true
npm-test-command: npm run build
node-version-matrix: '[22]'
node-version-matrix: '[24]'
upload-coverage: false
disable-test-package: true
2 changes: 1 addition & 1 deletion .github/workflows/spellcheck.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ jobs:
spellcheck:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/checkout@v5
- uses: streetsidesoftware/cspell-action@v7
with:
config: ./cspell.config.yaml
Expand Down
2 changes: 1 addition & 1 deletion .node-version
Original file line number Diff line number Diff line change
@@ -1 +1 @@
22
24
1 change: 0 additions & 1 deletion .npmrc

This file was deleted.

1 change: 0 additions & 1 deletion .nvmrc

This file was deleted.

File renamed without changes.
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# image-js-docs

This is the source code repository for the documentation of [image-js](https://github.com/image-js/image-js-typescript)
This is the source code repository for the documentation of [image-js](https://github.com/image-js/image-js)

The documentation is available on [https://image-js-docs.pages.dev/](https://image-js-docs.pages.dev/)
The documentation is available on <https://docs.image-js.org/>.

## Create demos

A demo is simply function which takes an image or mask as input and returns an image or mask as output. When imported in `md` files, it will be transformed into a demo component which allows to choose from various image or video sources to showcase the image transformation.
A demo is simply a function which takes an image or mask as input and returns an image or mask as output. When imported in `md` files, it will be transformed into a demo component which allows choosing from various image or video sources to showcase the image transformation.

### Image example

Expand Down
40 changes: 21 additions & 19 deletions blog/release.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ title: Release notes v1
date: 2025-07-25
---

We're excited to announce the release of a new major version of ImageJS. This version brings TypeScript support and a more intuitive API while maintaining the powerful image processing capabilities you love.
We're excited to announce the release of a new major version of ImageJS.
This version brings TypeScript support and a more intuitive API while maintaining the powerful image processing capabilities you love.

<!-- truncate -->

Expand All @@ -22,7 +23,8 @@ const pixel = img.getPixel(x, y); // any[]
const pixel = img.getPixel(x, y); // number[] with proper channel count
```

This helps preventing runtime type errors and enables better IntelliSense, autocomplete, and refactoring support in your IDE. Developers can now catch bugs at compile time rather than discovering them in production.
This helps prevent runtime type errors and enables better IntelliSense, autocomplete, and refactoring support in your IDE.
Developers can now catch bugs at compile time rather than discovering them in production.

## ⚠️ Breaking changes

Expand Down Expand Up @@ -54,11 +56,11 @@ const img = readSync('cat.jpg');
writeSync('newCat.jpg', img);
```

Those changes separates I/O operations from image manipulation for a clearer API design.
Those changes separate I/O operations from image manipulation for a clearer API design.

#### Creating images

When creating a new image, unlike before, image's width and height must be specified.
When creating a new image, unlike before, the image's width and height must be specified.

```ts
import { Image } from 'image-js';
Expand All @@ -78,8 +80,8 @@ Coordinates are now represented using `Point` objects instead of arrays. This ch
```ts
// Before
const croppedImage = img.crop({
x:10,
y:10
x: 10,
y: 10,
width: 10,
height: 10,
});
Expand All @@ -91,7 +93,7 @@ const croppedImage = img.crop({
});
```

It is a more explicit and self-documenting code. It also eliminates confusion about array order (column vs row).
It is a more explicit and self-documenting code. It also removes confusion about array order (column vs row).

### Masks

Expand Down Expand Up @@ -146,7 +148,7 @@ const whiteRegions = roiMap.whiteRois;

The new `blackRois` and `whiteRois` properties provide more intuitive access to region data based on pixel values rather than geometric dimensions.

For more information, please, visit these tutorials:
For more information, please visit these tutorials:

- [Image segmentation with `threshold()` and `fromMask()`](../docs/Tutorials/Image%20segmentation%20with%20threshold)
- [Image segmentation with `watershed()`](../docs/Tutorials/Image%20segmentation%20with%20watershed)
Expand Down Expand Up @@ -263,21 +265,21 @@ The following deprecated features have been removed:

#### Images

- `countAlphaPixel()` - Use custom pixel counting with [`getPixel()`](https://image-js.github.io/image-js/classes/index.Image.html#getpixel 'API link on getPixel').
- `countAlphaPixel()` - Use custom pixel counting with [`getPixel()`](https://api.image-js.org/classes/index.Image.html#getpixel 'API link on getPixel').
- `paintLabels()` and `roi.paint()` - Features have been removed due to dependency issues. We plan to add it back in future updates.
- `warpingFourPoints()` - Use [`getPerspectiveWarpMatrix()`](../docs/Features/Geometry/Get%20Perspective%20Warp%20Matrix 'internal link on getPerspectiveWarp') + [`transform()`](release.md#transform) instead.
- 32-bit color depth support and `abs()` have been removed.
- `CMYK` and `HSL` color models have been removed.
- `paintMasks()` has been removed. Use [`paintMask()`](https://image-js.github.io/image-js/classes/index.Image.html#paintmask 'API link on paintMask')+ a `for` loop.
- `paintMasks()` has been removed. Use [`paintMask()`](https://api.image-js.org/classes/index.Image.html#paintmask 'API link on paintMask')+ a `for` loop.
- `clearBit()` and `toggleBit()` have been removed, due to changes in `Mask`
data representation (see ["Masks"](#masks)). Use [`setBit()`](https://image-js.github.io/image-js/classes/index.Mask.html#setbit 'API link on setBit') or [`setValue()`](https://image-js.github.io/image-js/classes/index.Image.html#setvalue 'API link on setValue') instead.
data representation (see ["Masks"](#masks)). Use [`setBit()`](https://api.image-js.org/classes/index.Mask.html#setbit 'API link on setBit') or [`setValue()`](https://api.image-js.org/classes/index.Image.html#setvalue 'API link on setValue') instead.
- `combineChannels()` has been removed.
- `rgba8()` and `rgba()` have been removed. Use a combination of [`convertColor()`](https://image-js.github.io/image-js/classes/index.Image.html#convertcolor 'API link on convertColor') and [`convertBitDepth()`](https://image-js.github.io/image-js/classes/index.Image.html#convertbitdepth 'API link on convertBitDepth') instead.
- `rgba8()` and `rgba()` have been removed. Use a combination of [`convertColor()`](https://api.image-js.org/classes/index.Image.html#convertcolor 'API link on convertColor') and [`convertBitDepth()`](https://api.image-js.org/classes/index.Image.html#convertbitdepth 'API link on convertBitDepth') instead.
- `histograms()` and `colorHistogram()` have been removed.
- `getPixelGrid()` has been removed.
- `getClosestCommonParent()` and `getRelativePosition()` have been removed.
- `getSimilarity()` and `getIntersection()` have been removed.
- `paintPolygons()` and `paintPolylines()`have been removed. Use [`drawPolygon()`](https://image-js.github.io/image-js/classes/index.Image.html#drawpolygon 'API link on drawPolygon')/ [`drawPolyline()`](https://image-js.github.io/image-js/classes/index.Image.html#drawpolyline 'API link on drawPolyline') + a `for` loop.
- `paintPolygons()` and `paintPolylines()`have been removed. Use [`drawPolygon()`](https://api.image-js.org/classes/index.Image.html#drawpolygon 'API link on drawPolygon')/ [`drawPolyline()`](https://api.image-js.org/classes/index.Image.html#drawpolyline 'API link on drawPolyline') + a `for` loop.
- `getMoment()` has been removed.

#### ROIs and its management
Expand All @@ -289,7 +291,7 @@ The following deprecated features have been removed:
- `findCorrespondingRoi()` has been removed.
- `resetPainted()` has been removed.
- `mergeRoi()` and `mergeRois()` have been removed.
- `minX`,`minY`,`meanX`,`meanY`,`maxX`,`maxY` have been removed. Use [ROI's `origin`, combined with its `width` and `height`](https://image-js.github.io/image-js/classes/index.Roi.html 'API link on ROI').
- `minX`,`minY`,`meanX`,`meanY`,`maxX`,`maxY` have been removed. Use [ROI's `origin`, combined with its `width` and `height`](https://api.image-js.org/classes/index.Roi.html 'API link on ROI').

## 🆕 New features

Expand Down Expand Up @@ -374,7 +376,7 @@ const corrected = image.correctColor(measured, reference);

### `variance()`

A function that calculates image's [variance](https://en.wikipedia.org/wiki/Variance 'wikipedia link on variance') has been added.
A function that calculates an image's [variance](https://en.wikipedia.org/wiki/Variance 'wikipedia link on variance') has been added.

```ts
// Calculate variance for entire image
Expand Down Expand Up @@ -412,7 +414,7 @@ const pixelatedImage = image.pixelate({

### `cropRectangle()`

While `crop()` and `cropRectangle()` might appear similar. However, they provide provide different approaches to extracting image regions.
While `crop()` and `cropRectangle()` might appear similar. However, they provide different approaches to extracting image regions.

`crop()` - Standard rectangular cropping that maintains the original image orientation:

Expand Down Expand Up @@ -585,14 +587,14 @@ Bugs in multiple functions have been fixed:

## 📚 Resources

- [API Documentation](https://image-js.github.io/image-js-typescript/ 'link on API')
- [Examples and Tutorials](https://image-js-docs.pages.dev/ 'link on image-js tutorials and tips')
- [API Documentation](https://api.image-js.org/ 'link on API')
- [Examples and Tutorials](https://docs.image-js.org/ 'link on image-js tutorials and tips')

## 🤝 Contributing

We welcome contributions! The new TypeScript codebase makes it easier than ever to contribute.

- [GitHub Repository](https://github.com/image-js/image-js-typescript 'link on github repository')
- [GitHub Repository](https://github.com/image-js/image-js 'link on github repository')

## 🙏 Acknowledgments

Expand Down
1 change: 0 additions & 1 deletion cspell.config.yaml
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
---
$schema: https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json
version: '0.2'
dictionaryDefinitions:
- name: project-words
path: './project-words.txt'
Expand Down
8 changes: 4 additions & 4 deletions docs/Basics/Working with Masks.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ const mask = new Mask(500, 500); // Creates a simple mask filled with 0s of size

#### Options

| Property | Required | Default value |
| --------------------------------------------------------------------------------------------- | -------- | ---------------------- |
| [`origin`](https://image-js.github.io/image-js-typescript/interfaces/MaskOptions.html#origin) | no | `{row: 0, column: 0 }` |
| [`data`](https://image-js.github.io/image-js-typescript/interfaces/MaskOptions.html#data) | no | - |
| Property | Required | Default value |
| ----------------------------------------------------------------------------- | -------- | ---------------------- |
| [`origin`](https://api.image-js.org/interfaces/index.MaskOptions.html#origin) | no | `{row: 0, column: 0 }` |
| [`data`](https://api.image-js.org/interfaces/index.MaskOptions.html#data) | no | - |

### Use `threshold()` method

Expand Down
4 changes: 2 additions & 2 deletions docs/Features/Comparison/Addition.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar_position: 10

_Add two images together._

[🖼️ Image options and parameters of `add` method](https://image-js.github.io/image-js-typescript/classes/Image.html#add 'github.io link')
[🖼️ Image options and parameters of `add` method](https://api.image-js.org/classes/index.Image.html#add)

`add` method, opposed to [subtraction](./Subtraction.md 'internal link on subtract'), takes another Image and makes an addition between each respective pixel value.
It works like this:
Expand Down Expand Up @@ -36,4 +36,4 @@ Images must have the same size, channel number and bit depth for compatibility r

### Parameters and default values

- [`otherImage`](https://image-js.github.io/image-js-typescript/classes/Mask.html#add 'github.io link')
- [`otherImage`](https://api.image-js.org/classes/index.Mask.html#add)
8 changes: 4 additions & 4 deletions docs/Features/Comparison/Hypotenuse.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar_position: 30

_Calculates the euclidean distance of two points between two images._

[🖼️ Image options and parameters of `hypotenuse` method](https://image-js.github.io/image-js-typescript/classes/Image.html#hypotenuse 'github.io link')
[🖼️ Image options and parameters of `hypotenuse` method](https://api.image-js.org/classes/index.Image.html#hypotenuse)

A "hypotenuse filter" is using two compatible images to change values of each pixel by calculating [Euclidean distance](https://en.wikipedia.org/wiki/Euclidean_distance 'wikipedia link on Euclidean distance') with the formula:

Expand All @@ -32,9 +32,9 @@ Where $$Value1$$ is a value of the pixel in the first image and $$Value2$$ is th

#### Options

| Property | Required | Default value |
| ------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| [`channels`](https://image-js.github.io/image-js-typescript/interfaces/HypotenuseOptions.html#channels) | no | - |
| Property | Required | Default value |
| --------------------------------------------------------------------------------------- | -------- | ------------- |
| [`channels`](https://api.image-js.org/interfaces/index.HypotenuseOptions.html#channels) | no | - |

:::caution
Images must be compatible by size, bit depth, number of channels and number of alpha channels. However, for the resulting image user can choose the bit depth of the resulting image as well as channels which the algorithm will be applied to.
Expand Down
8 changes: 4 additions & 4 deletions docs/Features/Comparison/Logical conjunction.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar_position: 100

_Makes a logical conjunction between masks._

[🎭 Mask options and parameters of `and` method](https://image-js.github.io/image-js-typescript/classes/Mask.html#and 'github.io link')
[🎭 Mask options and parameters of `and` method](https://api.image-js.org/classes/index.Mask.html#and)

`and` method performs a [logical conjunction](https://en.wikipedia.org/wiki/Logical_conjunction 'wikipedia link on logical conjunction') between bits of two masks.

Expand All @@ -31,6 +31,6 @@ Masks must have the same size for compatibility reasons.

#### Options

| Property | Required | Default value |
| -------------------------------------------------------------------------------------- | -------- | ------------- |
| [`out`](https://image-js.github.io/image-js-typescript/interfaces/AndOptions.html#out) | no | - |
| Property | Required | Default value |
| ---------------------------------------------------------------------- | -------- | ------------- |
| [`out`](https://api.image-js.org/interfaces/index.AndOptions.html#out) | no | - |
8 changes: 4 additions & 4 deletions docs/Features/Comparison/Logical disjunction.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar_position: 110

_Makes a logical disjunction between masks._

[🎭 Mask options and parameters of `or` method](https://image-js.github.io/image-js-typescript/classes/Mask.html#or 'github.io link')
[🎭 Mask options and parameters of `or` method](https://api.image-js.org/classes/index.Mask.html#or)

`or` method performs a [logical disjunction](https://en.wikipedia.org/wiki/Logical_disjunction 'wikipedia link on logical disjunction') between bits of two masks.

Expand All @@ -31,6 +31,6 @@ Masks must have the same size for compatibility reasons.

#### Options

| Property | Required | Default value |
| ------------------------------------------------------------------------------------- | -------- | ------------- |
| [`out`](https://image-js.github.io/image-js-typescript/interfaces/OrOptions.html#out) | no | - |
| Property | Required | Default value |
| --------------------------------------------------------------------- | -------- | ------------- |
| [`out`](https://api.image-js.org/interfaces/index.OrOptions.html#out) | no | - |
10 changes: 5 additions & 5 deletions docs/Features/Comparison/Subtraction.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ sidebar_position: 20

_Makes a subtraction between two images._

[🖼️ Image options and parameters of `subtract` method](https://image-js.github.io/image-js-typescript/classes/Image.html#subtract 'github.io link')
[🎭 Mask options and parameters of `subtract` method](https://image-js.github.io/image-js-typescript/classes/Mask.html#subtract 'github.io link')
[🖼️ Image options and parameters of `subtract` method](https://api.image-js.org/classes/index.Image.html#subtract)
[🎭 Mask options and parameters of `subtract` method](https://api.image-js.org/classes/index.Mask.html#subtract)

Method called `subtract`, as the name suggests, takes another Image(or Mask) and makes a subtraction between each respective bit.
It works like this:
Expand Down Expand Up @@ -47,9 +47,9 @@ Parameters and options for Images and Masks are the same.

#### Options

| Property | Required | Default value |
| ---------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| [`absolute`](https://image-js.github.io/image-js-typescript/interfaces/SubtractImageOptions.html#absolute) | no | `false` |
| Property | Required | Default value |
| ------------------------------------------------------------------------------------------ | -------- | ------------- |
| [`absolute`](https://api.image-js.org/interfaces/index.SubtractImageOptions.html#absolute) | no | `false` |

:::info
The method is also available for Masks.
Expand Down
Loading