Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
1087a6d
chore: update node and deps (#130)
stropitek Aug 5, 2025
05733e4
docs: fix blog article titles
EscapedGibbon Jul 31, 2025
f2fe6d1
chore: update ts and linting libs (#133)
stropitek Aug 5, 2025
d0b2caf
feat: add logo and change theme colors
stropitek Aug 8, 2025
9036239
feat: show code in demos by default
stropitek Aug 8, 2025
27c7f3f
chore: apply eslint to demos
stropitek Aug 8, 2025
10ebfe5
chore: update dependencies and links (#136)
targos Aug 19, 2025
3bafe18
chore: do not use orama plugin for now (#137)
stropitek Aug 19, 2025
a042205
feat: add algolia search box (#138)
stropitek Aug 19, 2025
656a5ab
docs(blog): retitle v1.0 blog post and add announcement bar (#140)
targos Aug 19, 2025
14e28f4
refactor: rework and simplify Getting started page (#142)
targos Aug 20, 2025
7372e44
fix: update image-js to v1.0.0
targos Aug 20, 2025
a440b2c
chore: remove bad npm script
stropitek Aug 20, 2025
8187f2a
fix: rewrite problematic SVGs
stropitek Aug 20, 2025
1421048
docs: fix Level page title (#147)
EscapedGibbon Aug 22, 2025
49bbf35
chore: add umami tracking (#148)
targos Aug 22, 2025
cf31119
fix: update social card (#149)
EscapedGibbon Aug 26, 2025
e7ff102
docs wip start writing useful tips on transform function
EscapedGibbon Sep 2, 2025
a13b1c3
Merge remote-tracking branch 'origin/main' into 125-add-page-in-usefu…
EscapedGibbon Sep 24, 2025
a77814a
docs: add more info on transform() parameters and options
EscapedGibbon Sep 24, 2025
9a01e49
Merge branch 'main' into 125-add-page-in-useful-tips-about-transform-…
EscapedGibbon Sep 24, 2025
67078eb
docs: finalize useful tips for transform function
EscapedGibbon Sep 29, 2025
b48970f
docs: revert some changes
EscapedGibbon Sep 29, 2025
f44f3db
docs: add small clarification on borderType: constant
EscapedGibbon Sep 29, 2025
a2cae3a
docs: add image for borderValue test
EscapedGibbon Sep 29, 2025
83f7514
docs: add fixes
EscapedGibbon Sep 30, 2025
4ff2f94
docs: resolve conversations
EscapedGibbon Sep 30, 2025
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
192 changes: 77 additions & 115 deletions docs/useful-tips/images/transform-parameters/borderValueTest.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 9 additions & 3 deletions docs/useful-tips/transform-function-and-its-parameters.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ To understand what `borderType` is, we need to get back to interpolation for a m
```ts
const result = image.transform(matrix, {
borderType: 'constant',
borderValue: 255, // White border
borderValue: 125, // Grey border
});
```

Expand Down Expand Up @@ -130,17 +130,19 @@ const result2 = image.transform(rotationMatrix, {
});
```

As you can see using the same matrix images the image seems to be turned into opposite directions. Basically, with `inverse` set to `true` you kind of "revert" an image back to the states that it was before the matrix transformed.
As you can see using the same matrix images the image seems to be turned into opposite directions.

![inverse test](./images/transform-parameters/inverseTest.svg)

#### Full Image

`fullImage` ensures that the output image is large enough to contain all transformed pixels from the source image, preventing any cropping. When true, the function automatically calculates the required output dimensions.
`fullImage` ensures that the output image is large enough to contain all transformed pixels from the source image, preventing any cropping. When true, the function automatically calculates the required output dimensions. When false, source image dimensions are taken.

```ts
//Without fullImage - may crop transformed pixels
const result1 = image.transform(rotationMatrix, {
width: 8,
height: 10,
fullImage: false,
});

Expand All @@ -153,3 +155,7 @@ const result2 = image.transform(rotationMatrix, {
This is particularly useful for rotations, where corners of the image may extend beyond the original boundaries.

![fullImage test](./images/transform-parameters/fullImageTest.svg)

:::warning
If `fullImage` is defined together with `width` and `height`, the algorithm will use dimensions calculated for `fullImage`.
:::