Display image in the browser's console

consoleImage.js

(window as any).console.image = (canvas: HTMLCanvasElement, targetWidth?: number, targetHeight?: number) => {
  const url = canvas.toDataURL();
  const image = new Image();
  image.src = url;

  image.onload = () => {
    // 1. Determine dimensions: Use target resolution if provided,
    // otherwise default to the canvas's own dimensions.
    const w = targetWidth ?? canvas.width;
    const h = targetHeight ?? canvas.height;

    const style = [
      'font-size: 1px;',
      // 2. Padding creates the "box". We use half the width/height
      // because padding is added to both sides of the character.
      `padding: ${h / 2}px ${w / 2}px;`,
      `background: url(${url}) no-repeat;`,
      // 3. Force the background image to fit the exact box size
      `background-size: ${w}px ${h}px;`,
      'line-height: 0;',
    ].join(' ');

    // Use a single space character as the "container" for the background
    console.log('%c ', style);
  };
};