microsoft/playwright · error · Error

Invalid input image

Error message

Invalid input image

What it means

scaleImageToSize throws 'Invalid input image' when the source image's width or height is <= 0. The function performs bicubic Catmull-Rom resampling which requires a valid positive-area source; a degenerate source (zero rows or columns) has no pixels to sample.

Source

Thrown at packages/isomorphic/imageUtils.ts:52

        buffer[to + 1] = 0;
        buffer[to + 2] = 0;
        buffer[to + 3] = 0;
      }
    }
  }
  return { data: Buffer.from(buffer), width: size.width, height: size.height };
}

export function scaleImageToSize(image: ImageData, size: { width: number; height: number }): ImageData {
  const { data: src, width: w1, height: h1 } = image;
  const w2 = Math.max(1, Math.floor(size.width));
  const h2 = Math.max(1, Math.floor(size.height));

  if (w1 === w2 && h1 === h2)
    return image;

  if (w1 <= 0 || h1 <= 0)
    throw new Error('Invalid input image');
  if (size.width <= 0 || size.height <= 0 || !isFinite(size.width) || !isFinite(size.height))
    throw new Error('Invalid output dimensions');

  const clamp = (v: number, lo: number, hi: number) => (v < lo ? lo : v > hi ? hi : v);

  // Catmull–Rom weights
  const weights = (t: number, o: Float32Array) => {
    const t2 = t * t;
    const t3 = t2 * t;
    o[0] = -0.5 * t + 1.0 * t2 - 0.5 * t3;
    o[1] = 1.0 - 2.5 * t2 + 1.5 * t3;
    o[2] = 0.5 * t + 2.0 * t2 - 1.5 * t3;
    o[3] = -0.5 * t2 + 0.5 * t3;
  };

  const srcRowStride = w1 * 4;
  const dstRowStride = w2 * 4;

View on GitHub (pinned to c8fc3bf8d3)

Solutions

1. Check image.width > 0 && image.height > 0 before calling scaleImageToSize.
2. Fix the upstream producer: ensure the screenshot/decode actually returned pixels (await element to be visible and have non-zero bounding box first).
3. Skip scaling for degenerate images and pass them through unchanged or drop them.

Example fix

// before
const scaled = scaleImageToSize(img, { width: 64, height: 64 }); // img.width === 0

// after
if (img.width <= 0 || img.height <= 0) throw new Error('cannot scale empty image');
const scaled = scaleImageToSize(img, { width: 64, height: 64 });

function isScalableImage(img: {width:number;height:number;data:Buffer}): boolean {
  return img.width > 0 && img.height > 0;
}

function isScalableImage(img: unknown): img is { width: number; height: number; data: Buffer } {
  return !!img && typeof img === 'object'
    && typeof (img as any).width === 'number' && (img as any).width > 0
    && typeof (img as any).height === 'number' && (img as any).height > 0;
}

try { return scaleImageToSize(img, target); }
catch (e) { if (e.message === 'Invalid input image') return img; /* passthrough */ throw e; }

When it happens

Trigger: Calling scaleImageToSize with an ImageData whose width or height is 0 or negative. This typically originates from screenshot/trace-image pipelines that produced an empty buffer (e.g. screenshot of a 0-size element, or a decoded image whose dimensions were not populated).

Common situations: Screenshots of elements with zero rendered size (display:none, collapsed, or not yet laid out); image-decode failures that returned a stub; upstream code that synthesized an ImageData without setting width/height; passing a placeholder/empty buffer through the scaling path.

Related errors

• Invalid output dimensions
• path: unsupported mime type "${mimeType}"
• Error while parsing selector `${selector}` - selector cannot
• Cannot find .trace file
• Invalid glob pattern ${JSON.stringify(glob)}: nested '{' is

AI-assisted analysis of microsoft/playwright@c8fc3bf8d3 (2026-08-12). Data as JSON: /api/errors/bb60cf08e605ac9b. Report an issue: GitHub.