# Apply Effects

## Content

DsPdfJS provides a variety of bitmap effects that can be applied to images to modify their appearance. These effects include grayscale conversion, dithering, thresholding, Gaussian blur, and several color adjustment effects such as brightness, contrast, hue rotation, saturation, and sepia. Effects are applied directly to a Bitmap instance using dedicated methods of the Bitmap class.

### Effects Overview

The following illustrations demonstrate several effects that can be applied to images using DsPdfJS.

| Grayscale Effect | Dithering Effect |
| ---------------- | ---------------- |
| ![Grayscale_1.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Grayscale_1-20260430.09596e.png) | ![Dithering-1.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Dithering-1-20260430.dd3c28.png) |
| **Bradley Thresholding** | **Otsu Thresholding** |
| ![Bradley-1.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Bradley-1-20260430.3a9d35.png) | ![Otsu-1.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Otsu-1-20260430.6adccd.png) |
| **LuminanceToAlpha** | **Brightness Contrast** |
| ![Luminance-1.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Luminance-1-20260430.8e8877.png) | ![Brightness-1.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Brightness-1-20260430.54b482.png) |
| **Gamma Correction** | **Hue Rotation** |
| ![Gamma-1.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Gamma-1-20260430.bf5bbc.png) | ![Hue-1.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Hue-1-20260430.c53cb6.png) |
| **Sepia** | **Gaussian Blur** |
| ![Sepia-1.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Sepia-1-20260430.04d5f9.png) | ![Gaussian-1.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Gaussian-1-20260430.b86cf5.png) |

### Apply Effects to an Image

In DsPdfJS, effects are applied directly to a bitmap using effect‑specific methods. Each method modifies the image in place, meaning the result replaces the original content of the bitmap.
To apply an effect to an image:

1. Load the image using the[ Image.load ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/Image#load)method.
2. Convert the image to a bitmap using [toBitmap](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/Image#tobitmap).
3. Call the desired apply... method on the Bitmap instance.
4. Display or save the resulting image.

The following code example shows how to apply grayscale and dithering effects to an image.

>type=note
> **Note:** The examples on this page use helper functions from the [Snippet Helpers](https://developer.mescius.com/document-solutions/javascript-pdf-api/docs/snippet-helpers) module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API.

```javascript
const bytes = await Util.loadFile("images/maple.jpg");
const bmp = Image.load(bytes).toBitmap();

bmp.applyGrayscaleEffect(GrayscaleStandard.BT709);
bmp.applyDitheringEffect(DitheringMethod.Stucki);

Util.showBitmap(bmp);
```

DsPdfJS provides many additional bitmap effects through methods of the Bitmap class, such as applyGaussianBlur, applyBrightnessContrast, applyGammaCorrection, etc. Refer to the [Bitmap API ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/Bitmap)documentation for the complete list of available effects.