Implementation:Microsoft Playwright ImageUtils

Overview

ImageUtils provides image manipulation utilities for padding and scaling images, used by Playwright's visual comparison system to handle size mismatches between actual and expected screenshots.

Description

This module provides two core image manipulation functions:

• padImageToSize -- pads an image with transparent (black with alpha=0) pixels to match a target size, preserving the original image in the top-left corner
• scaleImageToSize -- scales an image to a target size using Catmull-Rom interpolation for high-quality downscaling/upscaling

Both functions operate on ImageData objects containing raw RGBA pixel data with width and height metadata. They include fast paths for when no transformation is needed (sizes already match).

Usage

Used by the comparators module when comparing screenshots of different sizes.

Code Reference

Source Location

packages/playwright-core/src/server/utils/imageUtils.ts (138 lines)

Function Signatures

export type ImageData = { width: number; height: number; data: Buffer };

export function padImageToSize(image: ImageData, size: { width: number; height: number }): ImageData;
export function scaleImageToSize(image: ImageData, size: { width: number; height: number }): ImageData;

Import

import { padImageToSize, scaleImageToSize } from './server/utils/imageUtils';
import type { ImageData } from './server/utils/imageUtils';

I/O Contract

Inputs

• image: ImageData -- source image with RGBA buffer
• size -- target width and height

Outputs

• New ImageData with the target dimensions
• Original image returned unchanged if sizes already match

Related Pages

• Microsoft_Playwright_Comparators -- Uses image utils for size normalization
• Microsoft_Playwright_Pixelmatch -- Pixel comparison on normalized images
• Microsoft_Playwright_ImageCompare -- SSIM comparison on normalized images