Skip to main content

Working with Images

What is an Image?​

In the context of digital technology and computing, images are represented as a grid of pixels, with each pixel containing information about color and intensity.

Types of images supported by ImagesJS​

  • Currently ImageJS supports images with these characteristics:
TIFFJPEGPNG1BMP
Can be loaded in this format✅✅✅✅
Can be saved in this format❌✅✅✅
Bits per channel1, 8 or 16 bits8 bits1, 2, 4, 8 or 16 bits1 or 8 bits
Alpha channel✅❌✅✅
Palette images✅❌✅❌
Lossy compressioncan be either✅❌❌
Color ModelBinary2,RGB or grayscaleRGBBinary2,RGB or grayscaleBinary2,RGB or grayscale

Image coordinates​

The origin point has coordinates (0,0) and is located in the top-left corner of an image.

Image coordinates

So, if we want to get a certain pixel on the image we will be counting the distance from image's top-left corner.

//We will receive 20th row and 10th column
//from the top-left corner.
const pixel = image.getPixel(10, 20);

Properties​

In ImageJS main properties of an image are:

  • width

  • height

  • data: typed array with information about image's pixels.

  • Color model: the abstract model of how pixel colors are formed.

  • Bit depth: number of bits allocated to each channel.

  • Number of channels: number of color channels that each pixel has. Grey image has one, RGB-type of image has three.

  • Number of components: number of color channels that each pixel has but without alpha channel.

  • Alpha channel: channel that represents the transparency or opacity levels of pixels.

  • Metadata: data about data. A basic example would be date and time when an image was taken.

Features​

Currently, there are several ways of processing an image:

  • Filtering: filters usually apply some sort of kernel to change an image.

  • Comparison: these features compare two images for further feature matching between the two.

  • Geometry: this part of ImageJS allows rotating and resizing an image.

  • Morphology: enables shape analysis and shape identification.

  • ROI analysis: these features allow targeting and extracting relevant information from specific regions of interest.

Footnotes​

  1. ImageJS can also decode APNG images. ↩

  2. While binary images can be decoded, for technical reasons image is decoded as a grayscale image. ↩ ↩2 ↩3