mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
SnapOtterandGitHub
ec98dfde9a
Landing: - Preload the Bricolage display font (LCP heading) to cut first paint - Cap tool-page meta descriptions at ~160 chars via whole-sentence truncation, so SERP snippets no longer overflow or cut mid-phrase - Drop dead HowTo + FAQPage JSON-LD from tool pages (Google removed HowTo rich results in 2023 and FAQ rich results in 2026); the visible content stays. Breadcrumb + WebApplication schema retained - Shorten 22 tool titles that exceeded the ~60-char SERP limit - Add an optional h1 override to tool SEO data - Rewrite adjust-colors, smart-crop, and ringtone-maker to match real Search Console query intent (saturation; object-aware cropping; convert audio to ringtone), with query-matched H1s and FAQs Docs: - Add meta descriptions to 20 pages missing frontmatter Repo: - Ignore local credential JSON files (.secrets/, *client_secret*, *service_account*)
83 lines
4.4 KiB
Markdown
83 lines
4.4 KiB
Markdown
---
|
|
description: Turn plain screenshots into polished images with gradient backgrounds, device frames, shadows, and social media sizing.
|
|
---
|
|
|
|
# Beautify Screenshot
|
|
|
|
Add gradient backgrounds, device frames, shadows, watermarks, and social media sizing to screenshots. Ideal for creating polished images for product marketing, social media, and documentation.
|
|
|
|
## API Endpoint
|
|
|
|
`POST /api/v1/tools/image/beautify`
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Required | Default | Description |
|
|
|-----------|------|----------|---------|-------------|
|
|
| backgroundType | string | No | `"linear-gradient"` | Background type: `solid`, `linear-gradient`, `radial-gradient`, `image`, `transparent` |
|
|
| backgroundColor | string | No | `"#667eea"` | Solid background color (used when `backgroundType` is `solid`) |
|
|
| gradientStops | array | No | `[{"color":"#667eea","position":0},{"color":"#764ba2","position":100}]` | Gradient color stops (min 2). Each stop has `color` (hex) and `position` (0-100). |
|
|
| gradientAngle | number | No | 135 | Gradient angle in degrees (0 to 360) |
|
|
| padding | number | No | 64 | Padding around the image in pixels (0 to 256) |
|
|
| borderRadius | number | No | 12 | Corner radius on the screenshot (0 to 64) |
|
|
| shadowPreset | string | No | `"subtle"` | Shadow preset: `none`, `subtle`, `medium`, `dramatic`, `custom` |
|
|
| shadowBlur | number | No | 20 | Custom shadow blur radius (0 to 100, used when `shadowPreset` is `custom`) |
|
|
| shadowOffsetX | number | No | 0 | Custom shadow horizontal offset (-50 to 50) |
|
|
| shadowOffsetY | number | No | 10 | Custom shadow vertical offset (-50 to 50) |
|
|
| shadowColor | string | No | `"#000000"` | Custom shadow color as hex |
|
|
| shadowOpacity | number | No | 30 | Custom shadow opacity (0 to 100) |
|
|
| frame | string | No | `"none"` | Device or window frame: `none`, `macos-light`, `macos-dark`, `windows-light`, `windows-dark`, `browser-light`, `browser-dark`, `iphone`, `iphone-dark`, `macbook`, `macbook-dark`, `ipad`, `ipad-dark` |
|
|
| frameTitle | string | No | - | Title text displayed in window frame title bars |
|
|
| socialPreset | string | No | `"none"` | Resize to social media dimensions: `none`, `twitter`, `linkedin`, `instagram-square`, `instagram-story`, `facebook`, `producthunt` |
|
|
| watermarkText | string | No | - | Optional watermark text overlay |
|
|
| watermarkPosition | string | No | `"bottom-right"` | Watermark position: `top-left`, `top-right`, `bottom-left`, `bottom-right`, `center` |
|
|
| watermarkOpacity | number | No | 50 | Watermark opacity (0 to 100) |
|
|
| outputFormat | string | No | `"png"` | Output format: `png`, `jpeg`, `webp` |
|
|
|
|
## Example Request
|
|
|
|
```bash
|
|
curl -X POST http://localhost:1349/api/v1/tools/image/beautify \
|
|
-F "file=@screenshot.png" \
|
|
-F 'settings={"backgroundType":"linear-gradient","gradientStops":[{"color":"#667eea","position":0},{"color":"#764ba2","position":100}],"gradientAngle":135,"padding":64,"borderRadius":12,"shadowPreset":"medium","frame":"macos-dark","socialPreset":"twitter"}'
|
|
```
|
|
|
|
### With Background Image
|
|
|
|
```bash
|
|
curl -X POST http://localhost:1349/api/v1/tools/image/beautify \
|
|
-F "file=@screenshot.png" \
|
|
-F "backgroundImage=@bg-texture.jpg" \
|
|
-F 'settings={"backgroundType":"image","padding":80,"borderRadius":16,"shadowPreset":"dramatic"}'
|
|
```
|
|
|
|
## Example Response
|
|
|
|
```json
|
|
{
|
|
"jobId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
|
|
"downloadUrl": "/api/v1/download/a1b2c3d4-e5f6-7890-abcd-ef1234567890/screenshot.png",
|
|
"originalSize": 234567,
|
|
"processedSize": 567890
|
|
}
|
|
```
|
|
|
|
## Notes
|
|
|
|
- Accepts two file fields: `file` (required, the main screenshot) and `backgroundImage` (optional, used when `backgroundType` is `image`).
|
|
- Supports HEIC, RAW, PSD, and SVG input formats (automatically decoded).
|
|
- Shadow presets map to specific values:
|
|
- `subtle`: blur 20, offsetY 4, opacity 20%
|
|
- `medium`: blur 40, offsetY 10, opacity 35%
|
|
- `dramatic`: blur 80, offsetY 20, opacity 50%
|
|
- Social media presets resize the final output to fit the target dimensions using `contain` mode:
|
|
- `twitter`: 1600x900
|
|
- `linkedin`: 1200x627
|
|
- `instagram-square`: 1080x1080
|
|
- `instagram-story`: 1080x1920
|
|
- `facebook`: 1200x630
|
|
- `producthunt`: 1270x760
|
|
- Device frames (`iphone`, `macbook`, `ipad`) apply a hardware bezel around the image and skip the `borderRadius` setting.
|
|
- When transparency is required (shadow, border radius, device frames, or transparent background), the output is forced to PNG even if `jpeg` is selected.
|
|
- Image backgrounds are not supported in pipeline/batch mode.
|