AI Image Canvas Atlas methodology

Version 2026-09-07 · Primary-source ledger: JSON · The three named diagrams are licensed by Kingy.ai under CC BY 4.0.

# Kingy.ai Image Canvas Atlas

This production-quality local pilot explains what happens when a source image is transformed into a target canvas. The interaction calculates aspect-preserving cover crop, source-area loss, output megapixels, resampling scale, and effective print resolution.

## Preview locally

From this directory, run:

```bash
python3 -m http.server 4183
```

Then open `http://127.0.0.1:4183/`.

## Calculation model

Let the source dimensions be `SW × SH` and the target dimensions be `TW × TH`.

```text
source ratio = SW / SH
target ratio = TW / TH

if source ratio > target ratio:
  surviving crop = (SH × target ratio) × SH
otherwise:
  surviving crop = SW × (SW / target ratio)

crop loss = 1 − surviving crop area / source area
render scale = TW / surviving crop width
megapixels = TW × TH / 1,000,000
effective print PPI = TW / print width in inches
```

When render scale is greater than 1, the requested output requires upsampling. When it is 1 or lower, the output can be produced by retaining or reducing the surviving source pixels. The calculator reports the scale but does not predict resampling quality.

The focal-position controls use the same linear alignment concept as `object-position`. They change which excess pixels fall outside the frame. They do not change the retained area because the source and target ratios remain fixed.

## Preset catalog

[`presets.json`](presets.json) is versioned and checked on 2026-09-07. Each entry states its provenance.

- Camera, phone, square, portrait, editorial, and generic ratio presets are Kingy teaching examples.
- The YouTube video and Shorts thumbnail presets reproduce YouTube's current official recommendations: 3840×2160 at 16:9 and 2160×3840 at 9:16.
- User-entered dimensions become a custom canvas and carry no platform claim.

Changing platform guidance requires updating the JSON checked date, the matching source-ledger claim, and the UI copy together.

## Claim verification

The structured ledger is stored in [`sources.json`](sources.json).

- [W3C CSS Images Module Level 3](https://www.w3.org/TR/css-images-3/#the-object-fit) defines an aspect-preserving cover constraint that fills the target on both axes.
- [Adobe's image resizing documentation](https://helpx.adobe.com/photoshop/kb/advanced-cropping-resizing-resampling-photoshop.html) distinguishes PPI from printer DPI and explains the relationship among pixels, physical size, and print resolution.
- [Adobe's print-resolution guidance](https://helpx.adobe.com/photoshop/desktop/crop-resize-transform/resize-adjust-resolution/resolution-specs-for-printing-images.html) describes 300 PPI as an industry reference while explaining why viewing distance changes requirements.
- [YouTube Help](https://support.google.com/youtube/answer/72431?hl=en) supplies the dated official thumbnail dimensions and aspect ratios.

## Reusable assets

| Asset | Editable source | PNG export | Main use |
| --- | --- | --- | --- |
| Aspect-ratio field guide | `assets/aspect-ratio-field-guide.svg` | `assets/png/aspect-ratio-field-guide.png` | Articles, design references, social explanations |
| Cover-crop anatomy | `assets/cover-crop-anatomy.svg` | `assets/png/cover-crop-anatomy.png` | Crop-loss and `object-fit: cover` explanations |
| Pixels to print | `assets/pixels-to-print.svg` | `assets/png/pixels-to-print.png` | Megapixel, PPI, and print-size references |

All SVGs contain direct vector shapes and editable text with system-font fallbacks. Each PNG is 2400×1350. The assets are cleared for Kingy.ai's own editorial and promotional reuse. This local pilot does not assign a public redistribution license.

## Data exports

The CSV and JSON controls export the active scenario, preset version and provenance, all inputs, surviving crop geometry, crop-loss percentage, render and upscale factors, megapixels, print dimensions, PPI, formulas, and paths to the methodology and claim ledger.

Generated examples are included in `exports/kingy-image-canvas.csv` and `exports/kingy-image-canvas.json`.

## Package map

- `index.html` — page structure, interaction controls, explanatory copy, assets, and source ledger
- `styles.css` — responsive Kingy Atlas visual system
- `app.js` — crop geometry, focal positioning, preset loading, and exports
- `presets.json` — dated editorial and official-platform canvas presets
- `sources.json` — primary-source claims and formula ledger
- `assets/*.svg` — editable visual source
- `assets/png/*.png` — 2400×1350 raster exports
- `output/playwright/*.png` — desktop and mobile QA captures
- `VALIDATION.md` — correctness and usability evidence

The site has no build system, third-party runtime dependency, analytics, account, or paid service.