# cp949/web-image-util architecture

> Architecture diagram of the GitHub repository cp949/web-image-util, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/cp949/web-image-util
- Repository: https://github.com/cp949/web-image-util

## Overview

This is a browser-side TypeScript image-processing library built around Canvas 2D, with a chainable API for source-to-output processing. The main path normalizes an input, accumulates resize/transform/box/blur operations, renders lazily, then encodes a requested output. Other documented capabilities include SVG sanitation and inspection, format and image-information utilities, presets, shortcuts, filters, and browser capability detection. Relationships follow excerpts, the source index, or README statements; some feature links remain unverified because their implementation was not sampled.

Main entry points: [`sub/web-image-util/src/index.ts`](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/index.ts) (Public exports), [`sub/web-image-util/src/processor.ts`](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/processor.ts) (Chain processor), [`sub/web-image-util/src/core/output-pipeline.internal.ts`](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/core/output-pipeline.internal.ts) (Output pipeline), [`sub/web-image-util/src/presets/index.ts`](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/presets/index.ts) (Image presets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["Public API"]
  node_public["Public exports<br/>[index.ts]"]
  node_processor["Chain processor<br/>[processor.ts]"]
  node_presets["Image presets<br/>[index.ts]"]
  node_shortcuts["Resize shortcuts"]
end

subgraph group_processing["Image Processing"]
  node_output["Output pipeline"]
  node_sources["Source conversion<br/>[index.ts]"]
  node_lazy["Lazy render pipeline"]
  node_renderer["Single renderer"]
  node_filters["Filter plugins<br/>[plugin-system.ts]"]
  node_composition["Image composition<br/>[compose.ts]"]
end

subgraph group_svg["SVG Handling"]
  node_sanitizer["SVG sanitizer<br/>[index.ts]"]
  node_svginspect["SVG inspection<br/>[inspect-svg.ts]"]
  node_svgcompat["SVG compatibility<br/>[enhance.ts]"]
end

subgraph group_utilities["Utilities"]
  node_imageinfo["Image information<br/>[index.ts]"]
  node_dataurl["Data URL utilities<br/>[index.ts]"]
  node_formats["Format utilities<br/>[format-utils.ts]"]
  node_capabilities["Browser capabilities<br/>[index.ts]"]
end

node_user(("Library caller"))

node_user -->|"uses"| node_public
node_public -->|"exports"| node_processor
node_public -->|"exports"| node_presets
node_public -->|"exports"| node_shortcuts
node_public -->|"exports"| node_capabilities
node_public -->|"exports"| node_imageinfo
node_public -->|"exports"| node_dataurl
node_public -->|"exports"| node_formats
node_public -->|"exports"| node_sanitizer
node_public -->|"exports"| node_svginspect
node_public -->|"exports"| node_svgcompat
node_processor -->|"delegates output"| node_output
node_presets -->|"calls"| node_processor
node_shortcuts -->|"calls"| node_processor
node_output -->|"normalizes source"| node_sources
node_output -->|"renders via"| node_lazy
node_output -->|"chooses MIME"| node_formats
node_lazy -->|"analyzes and renders"| node_renderer
node_sanitizer -->|"inspection support"| node_svginspect
node_processor -.->|"supports blur"| node_filters
node_public -.->|"composition feature"| node_composition

click node_public "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/index.ts"
click node_processor "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/processor.ts"
click node_presets "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/presets/index.ts"
click node_shortcuts "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/shortcut/shortcut-builder.ts"
click node_output "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/core/output-pipeline.internal.ts"
click node_sources "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/core/source-converter/index.ts"
click node_lazy "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/core/lazy-render-pipeline.internal.ts"
click node_renderer "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/core/single-renderer.internal.ts"
click node_filters "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/filters/plugin-system.ts"
click node_composition "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/composition/compose.ts"
click node_sanitizer "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/svg-sanitizer/index.ts"
click node_svginspect "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/inspect-svg.ts"
click node_svgcompat "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/svg-compatibility/enhance.ts"
click node_imageinfo "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/image-info/index.ts"
click node_dataurl "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/data-url/index.ts"
click node_formats "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/format-utils.ts"
click node_capabilities "https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/browser-capabilities/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_public,node_processor,node_presets,node_shortcuts toneBlue
class node_output,node_sources,node_lazy,node_renderer,node_filters,node_composition toneAmber
class node_sanitizer,node_svginspect,node_svgcompat toneMint
class node_imageinfo,node_dataurl,node_formats,node_capabilities toneRose
class node_user toneIndigo
```

## Components

### Public API

- [Public exports](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/index.ts): `sub/web-image-util/src/index.ts`
- [Chain processor](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/processor.ts): `sub/web-image-util/src/processor.ts`
- [Image presets](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/presets/index.ts): `sub/web-image-util/src/presets/index.ts`
- [Resize shortcuts](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/shortcut/shortcut-builder.ts): `sub/web-image-util/src/shortcut/shortcut-builder.ts`

### Image Processing

- [Output pipeline](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/core/output-pipeline.internal.ts): `sub/web-image-util/src/core/output-pipeline.internal.ts`
- [Source conversion](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/core/source-converter/index.ts): `sub/web-image-util/src/core/source-converter/index.ts`
- [Lazy render pipeline](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/core/lazy-render-pipeline.internal.ts): `sub/web-image-util/src/core/lazy-render-pipeline.internal.ts`
- [Single renderer](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/core/single-renderer.internal.ts): `sub/web-image-util/src/core/single-renderer.internal.ts`
- [Filter plugins](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/filters/plugin-system.ts): `sub/web-image-util/src/filters/plugin-system.ts`
- [Image composition](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/composition/compose.ts): `sub/web-image-util/src/composition/compose.ts`

### SVG Handling

- [SVG sanitizer](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/svg-sanitizer/index.ts): `sub/web-image-util/src/svg-sanitizer/index.ts`
- [SVG inspection](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/inspect-svg.ts): `sub/web-image-util/src/utils/inspect-svg.ts`
- [SVG compatibility](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/svg-compatibility/enhance.ts): `sub/web-image-util/src/utils/svg-compatibility/enhance.ts`

### Utilities

- [Image information](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/image-info/index.ts): `sub/web-image-util/src/utils/image-info/index.ts`
- [Data URL utilities](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/data-url/index.ts): `sub/web-image-util/src/utils/data-url/index.ts`
- [Format utilities](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/format-utils.ts): `sub/web-image-util/src/utils/format-utils.ts`
- [Browser capabilities](https://github.com/cp949/web-image-util/blob/main/sub/web-image-util/src/utils/browser-capabilities/index.ts): `sub/web-image-util/src/utils/browser-capabilities/index.ts`

### Other components

- **Library caller**

## Connections

- Library caller → Public exports: uses (evidence: `sub/web-image-util/src/index.ts`)
- Public exports → Chain processor: exports (evidence: `sub/web-image-util/src/index.ts`)
- Public exports → Image presets: exports (evidence: `sub/web-image-util/src/index.ts`)
- Public exports → Resize shortcuts: exports (evidence: `sub/web-image-util/src/index.ts`)
- Public exports → Browser capabilities: exports (evidence: `sub/web-image-util/src/index.ts`)
- Public exports → Image information: exports (evidence: `sub/web-image-util/src/index.ts`)
- Public exports → Data URL utilities: exports (evidence: `sub/web-image-util/src/index.ts`)
- Public exports → Format utilities: exports (evidence: `sub/web-image-util/src/index.ts`)
- Public exports → SVG sanitizer: exports (evidence: `sub/web-image-util/src/index.ts`)
- Public exports → SVG inspection: exports (evidence: `sub/web-image-util/src/index.ts`)
- Public exports → SVG compatibility: exports (evidence: `sub/web-image-util/src/index.ts`)
- Chain processor → Output pipeline: delegates output (evidence: `sub/web-image-util/src/processor.ts`)
- Image presets → Chain processor: calls (evidence: `sub/web-image-util/src/presets/index.ts`)
- Resize shortcuts → Chain processor: calls (evidence: `sub/web-image-util/src/shortcut/shortcut-builder.ts`)
- Output pipeline → Source conversion: normalizes source (evidence: `sub/web-image-util/src/core/output-pipeline.internal.ts`)
- Output pipeline → Lazy render pipeline: renders via (evidence: `sub/web-image-util/src/core/output-pipeline.internal.ts`)
- Output pipeline → Format utilities: chooses MIME (evidence: `sub/web-image-util/src/core/output-pipeline.internal.ts`)
- Lazy render pipeline → Single renderer: analyzes and renders (evidence: `sub/web-image-util/src/core/lazy-render-pipeline.internal.ts`)
- SVG sanitizer → SVG inspection: inspection support (evidence: `sub/web-image-util/src/svg-sanitizer/index.ts`)
- Chain processor → Filter plugins: supports blur
- Public exports → Image composition: composition feature