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
Copy file name to clipboardExpand all lines: docs/API reference/Image/Filters/Blur.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ import BlurDemo from './blur.demo.tsx'
4
4
5
5
Blur, also known as average blur or box blur, is a simple image processing technique used to reduce noise and smooth out images. It involves replacing the color value of a pixel with the average color value of its neighboring pixels within a specified window or kernel. This process effectively blurs the image and reduces high-frequency noise.
6
6
7
-
Box blur is particularly effective in reducing [salt-and-pepper](https://en.wikipedia.org/wiki/Salt-and-pepper_noise'wikipedia link on salt and pepper noise') noise (random black and white pixels) and minor imperfections in an image. However, it also leads to loss of finer details, so the choice of [kernel](../../Glossary.md#kernel) size is important.
7
+
Box blur is particularly effective in reducing [salt-and-pepper](https://en.wikipedia.org/wiki/Salt-and-pepper_noise'wikipedia link on salt and pepper noise') noise (random black and white pixels) and minor imperfections in an image. However, it also leads to loss of finer details, so the choice of [kernel](../../../Glossary.md#kernel) size is important.
8
8
9
9
<BlurDemo />
10
10
@@ -33,7 +33,7 @@ Here's how blur filter is implemented in ImageJS:
33
33
34
34
_Select a Kernel Size_: The first step is to choose the size of the kernel or window that will be used for the blurring operation. The kernel is typically a square matrix with odd dimensions, such as 3x3, 5x5, 7x7, etc. The larger the kernel, the more intense the blurring effect.
35
35
36
-
_Iterate through Pixels_: For each pixel in the image, the algorithm applies [convolution](../../Glossary.md#convolution).
36
+
_Iterate through Pixels_: For each pixel in the image, the algorithm applies [convolution](../../../Glossary.md#convolution).
37
37
38
38
_Calculate Average Color_: The algorithm calculates the average color value of all the pixels within the kernel.
Copy file name to clipboardExpand all lines: docs/API reference/Image/Filters/Gradient.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ import GradientDemo from './gradient.demo.tsx'
6
6
7
7
[Check options and parameters of gradient method](https://image-js.github.io/image-js-typescript/functions/gradientFilter.html'link on github.io')
8
8
9
-
Gradient filter or specifically[ a gradient-based edge detection filter](https://en.wikipedia.org/wiki/Graduated_neutral-density_filter'Wikipedia link on gradient filter'), is an image processing technique used to highlight edges and boundaries within an image by emphasizing areas of rapid intensity change. The gradient filter operates by calculating the rate of change of pixel intensities across the image. When there's a rapid transition from one intensity level to another, [the convolution operation](../../Glossary.md#convolution'glossary link on convolution') captures this change as a high gradient magnitude value, indicating the presence of an edge. It's a fundamental step in various computer vision and image analysis tasks, such as edge detection, object recognition, and image segmentation.
9
+
Gradient filter or specifically[ a gradient-based edge detection filter](https://en.wikipedia.org/wiki/Graduated_neutral-density_filter'Wikipedia link on gradient filter'), is an image processing technique used to highlight edges and boundaries within an image by emphasizing areas of rapid intensity change. The gradient filter operates by calculating the rate of change of pixel intensities across the image. When there's a rapid transition from one intensity level to another, [the convolution operation](../../../Glossary.md#convolution'glossary link on convolution') captures this change as a high gradient magnitude value, indicating the presence of an edge. It's a fundamental step in various computer vision and image analysis tasks, such as edge detection, object recognition, and image segmentation.
10
10
11
11
<GradientDemo />
12
12
@@ -39,9 +39,9 @@ Here's how gradient filter is implemented in ImageJS:
39
39
40
40
_Grayscale Conversion_: Before applying a gradient filter, the color image is converted into [grayscale](grayscale.md'link to grayscale filter'). This simplifies the processing by reducing the image to a single channel representing pixel intensities.
41
41
42
-
_Kernel Operators_: Gradient filter consists of small convolution [kernels](../../Glossary.md#kernel'glossary link on kernel'). Normally, one for detecting horizontal changes and another for vertical changes, however user might indicate only one kernel to check only one of directions. These kernels are usually 3x3 matrices of numerical weights.
42
+
_Kernel Operators_: Gradient filter consists of small convolution [kernels](../../../Glossary.md#kernel'glossary link on kernel'). Normally, one for detecting horizontal changes and another for vertical changes, however user might indicate only one kernel to check only one of directions. These kernels are usually 3x3 matrices of numerical weights.
43
43
44
-
_Convolution Operation_: The gradient filter is applied through a [convolution](../../Glossary.md#convolution'glossary link on convolution') operation, where the filter kernel slides over the grayscale image. At each position, the convolution operation involves element-wise multiplication of the filter kernel with the corresponding pixels in the image, followed by summing up the results. This sum represents the rate of intensity change (gradient) at that location in the image.
44
+
_Convolution Operation_: The gradient filter is applied through a [convolution](../../../Glossary.md#convolution'glossary link on convolution') operation, where the filter kernel slides over the grayscale image. At each position, the convolution operation involves element-wise multiplication of the filter kernel with the corresponding pixels in the image, followed by summing up the results. This sum represents the rate of intensity change (gradient) at that location in the image.
45
45
46
46
_Gradient Magnitude and Direction_: For each pixel, the gradient magnitude is calculated by combining the results of the horizontal and vertical convolutions. The corresponding values from each convolution are put in square and summed, then put in square root.
Copy file name to clipboardExpand all lines: docs/API reference/Image/Filters/Invert.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,14 +22,14 @@ import InvertDemo from './invert.demo.tsx'
22
22
23
23
Here's how invert filter is implemented in ImageJS:
24
24
25
-
_Pixel Transformation_: For each pixel in the image, the inversion filter transforms its color [intensity](../../Glossary.md#intensity'glossary link on intensity') value. The new intensity value is calculated using the formula:
25
+
_Pixel Transformation_: For each pixel in the image, the inversion filter transforms its color [intensity](../../../Glossary.md#intensity'glossary link on intensity') value. The new intensity value is calculated using the formula:
26
26
27
27
$$New Intensity = Max Intensity - Original Intensity$$
28
28
29
29
Where "_Max Intensity_" is the maximum possible intensity value for the color channel.
30
30
31
31
:::warning
32
-
ImageJS uses components to calculate each pixel value and leaves alpha channel unchanged. For more information about channels and components visit [this link](../../Tutorials%20and%20concepts/Concepts/Channel%20vs%20component.md).
32
+
ImageJS uses components to calculate each pixel value and leaves alpha channel unchanged. For more information about channels and components visit [this link](../../../Tutorials%20and%20concepts/Concepts/Channel%20vs%20component.md).
Copy file name to clipboardExpand all lines: docs/API reference/Image/Filters/Median.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,7 +27,7 @@ However, the median filter also has limitations. It can blur sharp edges and thi
27
27
28
28
Here's how median filter is implemented in ImageJS:
29
29
30
-
_Window or Kernel Selection_: The first step is to choose a small window or [kernel](../../Glossary.md#kernel'glossary link to kernel'). This window will move over the entire image, pixel by pixel.
30
+
_Window or Kernel Selection_: The first step is to choose a small window or [kernel](../../../Glossary.md#kernel'glossary link to kernel'). This window will move over the entire image, pixel by pixel.
31
31
32
32
_Pixel Neighborhood_: As the window moves over the image, for each pixel location, the filter collects the pixel values within the window's neighborhood. The neighborhood consists of the pixels that are currently covered by the window/kernel.
Copy file name to clipboardExpand all lines: docs/API reference/Image/Filters/gaussianBlur.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -49,7 +49,7 @@ The size of the Gaussian kernel and the standard deviation parameter (which cont
49
49
50
50
Here's how Gaussian blur is implemented in ImageJS:
51
51
52
-
_Kernel Definition_: The core concept of Gaussian blur involves [convolving](../../Glossary.md#convolution'glossary link on convolution') the image with a Gaussian [kernel](../../Glossary.md#kernel'glossary link on kernel'), also known as a Gaussian filter or mask. This kernel's values are arranged in a way that creates a symmetric, bell-shaped pattern around the center of the kernel to approximate Gaussian function.
52
+
_Kernel Definition_: The core concept of Gaussian blur involves [convolving](../../../Glossary.md#convolution'glossary link on convolution') the image with a Gaussian [kernel](../../../Glossary.md#kernel'glossary link on kernel'), also known as a Gaussian filter or mask. This kernel's values are arranged in a way that creates a symmetric, bell-shaped pattern around the center of the kernel to approximate Gaussian function.
53
53
54
54
_Convolution Operation_: The Gaussian kernel is applied to the image using a convolution operation. This involves placing the kernel's center over each pixel in the image and performing element-wise multiplication of the kernel's values with the corresponding pixel values in the neighborhood. The results of these multiplications are summed up to compute the new value for the central pixel.
Copy file name to clipboardExpand all lines: docs/API reference/Image/Morphology/Erode.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@ import ErodeDemo from './erode.demo.tsx'
2
2
3
3
[Check options and parameters of erode method](https://image-js.github.io/image-js-typescript/classes/Image.html#erode'github.io link')
4
4
5
-
[Erosion](https://en.wikipedia.org/wiki/Erosion'wikipedia link on erosion') is a fundamental morphological operation in image processing that is used to reduce the size of foreground objects ([regions of interest](../../Glossary.md#roiregion-of-interest'internal link on region of interest')) within an image while preserving their shape and structure. It works by moving a structuring element (also known as a [kernel](../../Glossary.md#kernel'internal link on kernel')) over the image and replacing each pixel with the minimum value of the pixels covered by the structuring element. Erosion is particularly useful for tasks like noise reduction, edge detection, and object separation.
5
+
[Erosion](https://en.wikipedia.org/wiki/Erosion'wikipedia link on erosion') is a fundamental morphological operation in image processing that is used to reduce the size of foreground objects ([regions of interest](../../../Glossary.md#roiregion-of-interest'internal link on region of interest')) within an image while preserving their shape and structure. It works by moving a structuring element (also known as a [kernel](../../../Glossary.md#kernel'internal link on kernel')) over the image and replacing each pixel with the minimum value of the pixels covered by the structuring element. Erosion is particularly useful for tasks like noise reduction, edge detection, and object separation.
Copy file name to clipboardExpand all lines: docs/API reference/Image/Morphology/Morphology.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
sidebar_position: 2
3
3
---
4
4
5
-
[Morphological operations](../../Glossary.md#morphology'internal link on morphology') are based on a structuring element, which is a small shape or pattern used as a template for modifying the pixels in an image. The structuring element is typically a small binary array that defines the area around a pixel to consider during the operation.
5
+
[Morphological operations](../../../Glossary.md#morphology'internal link on morphology') are based on a structuring element, which is a small shape or pattern used as a template for modifying the pixels in an image. The structuring element is typically a small binary array that defines the area around a pixel to consider during the operation.
6
6
7
7
Morphological operations are simple yet powerful tools that play a significant role in various image processing tasks, especially in situations where the shapes and structures of objects are important
0 commit comments