[]
DEMOS DOCS API PRICING
FREE TRIAL
(Showing Draft Content)

Apply Effects

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

Dithering-1.png

Bradley Thresholding

Otsu Thresholding

Bradley-1.png

Otsu-1.png

LuminanceToAlpha

Brightness Contrast

Luminance-1.png

Brightness-1.png

Gamma Correction

Hue Rotation

Gamma-1.png

Hue-1.png

Sepia

Gaussian Blur

Sepia-1.png

Gaussian-1.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 method.

  2. Convert the image to a bitmap using 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.

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 documentation for the complete list of available effects.