# Appinn Cover Image Generator

> Generate 1608x700 cover images for articles and websites via URL parameters. No API key needed — just construct a URL and open it in a browser.

## Base URL

https://pic.appinn.com/

## How It Works

Append query parameters to the URL. The page renders a cover image in the browser using HTML5 Canvas. Users can then download the result as JPEG.

`title` and `desc` support manual line breaks. Use `%0A` in the URL to encode a new line.

## URL Parameters

| Parameter | Type | Range | Default | Description |
|---|---|---|---|---|
| title | string | any text | 我的精彩文章标题 | Cover title, supports line breaks via `%0A` |
| desc | string | any text | (preset text) | Description / subtitle, supports line breaks via `%0A` |
| style | string | premium, simple, elegant | premium | Visual style (only on index.html, redirects) |
| theme | string | see below | midnight / royal | Color theme |
| fontSize | int | 60-400 (step 10) | 100 | Title font size in px |
| titleWidth | int | 50-95 (step 5) | 85 / 80 | Title area width in % |
| descSize | int | 20-60 (step 2) | 32 | Description font size in px |
| separatorWidth | int | 0-800 (step 20) | 240 | Separator line width in px (0 hides it) |
| watermark | string | any text | APPINN.COM | Watermark text (empty string hides it) |
| download | int | 1 | - | Auto-download image after rendering |

## Three Visual Styles

### Premium Style (index.html)
Glassmorphism effects with gradient mesh orbs and noise texture.
- Themes: midnight, sunset, forest, ocean, obsidian
- Default theme: midnight

### Simple Style (index2.html)
Clean gradient background with strong text shadows.
- Themes: midnight, sunset, forest, ocean, obsidian
- Default theme: midnight

### Elegant Style (index3.html)
Dark card layout with subtle ambient glow and modern separator.
- Themes: royal, emerald, sapphire, ruby, onyx
- Default theme: royal

## Style Routing

The `style` parameter only works on `index.html` (the root `/`). It redirects to the target page while preserving all other parameters:
- `style=premium` → stays on index.html
- `style=simple` → redirects to index2.html
- `style=elegant` → redirects to index3.html

You can also visit sub-pages directly: `index3.html?title=Hello&theme=ruby`

## Examples

Basic usage:
https://pic.appinn.com/?title=新功能发布&desc=版本2.0全新体验

Multi-line text:
https://pic.appinn.com/?title=主标题%0A副标题&desc=第一行%0A第二行&theme=ocean

Specify style and theme:
https://pic.appinn.com/?style=elegant&title=设计指南&theme=sapphire

Full configuration:
https://pic.appinn.com/?title=完整示例&desc=所有参数&theme=forest&fontSize=120&titleWidth=90&descSize=40&separatorWidth=400

Auto-download:
https://pic.appinn.com/?title=Auto&desc=Downloads%20immediately&download=1

Direct page access:
https://pic.appinn.com/index3.html?title=直接访问&theme=ruby

## Behavior Notes

- No parameters: page behaves exactly as before (zero side effects)
- Invalid theme names: silently ignored, uses default
- Out-of-range numbers: clamped to min/max and snapped to step
- URL is preserved in address bar for sharing
- Image upload via URL is not supported (binary data limitation)
- Auto-download triggers 300ms after fonts are loaded to ensure rendering is complete

## Output

- Format: JPEG (MozJPEG when available, native fallback)
- Quality: 75%
- Dimensions: 1608 x 700 px
- Filename: cover-{timestamp}.jpg

## Optional: Further Reading

- API docs page: https://pic.appinn.com/api.html