Implementation:Microsoft Playwright ImageChannel

Overview

ImageChannel represents a single color channel of an image as a 2D array, providing efficient per-pixel access and RGBA-to-separate-channel decomposition with optional padding.

Description

The ImageChannel class stores a single color channel (R, G, or B) as a flat Uint8Array with width and height metadata. The static intoRGB method decomposes an RGBA image buffer into three separate ImageChannel instances, with optional padding using alternating colors around the borders.

Key features:

• Alpha blending with white during channel separation
• Configurable padding size and colors for border detection
• Efficient get(x, y) accessor for pixel values
• Used as input to the SSIM comparison pipeline

Usage

Used internally by the SSIM image comparison system to process images channel-by-channel.

Code Reference

Source Location

packages/playwright-core/src/server/utils/image_tools/imageChannel.ts (81 lines)

Class Signature

export type PaddingOptions = {
  paddingSize?: number;
  paddingColorOdd?: number[];
  paddingColorEven?: number[];
};

export class ImageChannel {
  data: Uint8Array;
  width: number;
  height: number;
  constructor(width: number, height: number, data: Uint8Array)
  get(x: number, y: number): number
  static intoRGB(width: number, height: number, data: Buffer, options?: PaddingOptions): ImageChannel[]
}

Import

import { ImageChannel } from './server/utils/image_tools/imageChannel';
import type { PaddingOptions } from './server/utils/image_tools/imageChannel';

I/O Contract

Inputs

• RGBA pixel buffer with width and height
• Optional padding configuration

Outputs

• Array of three ImageChannel instances [R, G, B]
• Each channel includes padding border if configured

Related Pages

• Microsoft_Playwright_ImageCompare -- SSIM comparison using image channels
• Microsoft_Playwright_SsimStats -- Statistical calculations on channels
• Microsoft_Playwright_ColorUtils -- Color blending used during decomposition