mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00

Files

T

SnapOtter d24e244af4 docs: organize tool pages by modality under /tools/<modality>/

Move all 157 tool pages into image/video/audio/pdf/data subfolders so URLs read /tools/<modality>/<id> (e.g. /tools/image/crop). Nest the image sub-categories under an Image group in the sidebar so the nav reads by modality. Add public/_redirects (301, clean + .html forms) mapping every old flat /tools/<id> URL to its new path so inbound links keep working. Rewrite all internal /tools links. Verified with a clean docs build (no dead links).

2026-06-18 14:12:28 +08:00

2.3 KiB

Raw Blame History

description

description
Generate a tiny low-quality image placeholder with base64 data URI.

LQIP Placeholder

Generate a tiny low-quality image placeholder (LQIP) from a source image. Returns a small placeholder file along with a base64 data URI, ready-to-use HTML <img> tag, and CSS background-image snippet for immediate embedding.

API Endpoint

POST /api/v1/tools/image/lqip-placeholder

Accepts multipart form data with an image file and a JSON settings field.

Parameters

Parameter	Type	Required	Default	Description
width	integer	No	`16`	Target width in pixels (4-64)
blur	number	No	`2`	Blur radius for the blur strategy (0-20)
strategy	string	No	`"blur"`	Placeholder strategy: `blur`, `pixelate`, or `solid`
format	string	No	`"webp"`	Output format: `webp`, `png`, or `jpeg`
quality	integer	No	`50`	Output quality (1-100)

Example Request

curl -X POST http://localhost:1349/api/v1/tools/image/lqip-placeholder \
  -H "Authorization: Bearer si_your-api-key" \
  -F "file=@photo.jpg" \
  -F 'settings={"width": 20, "strategy": "blur", "format": "webp"}'

Example Response

{
  "jobId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "downloadUrl": "/api/v1/download/a1b2c3d4-e5f6-7890-abcd-ef1234567890/photo.webp",
  "originalSize": 2450000,
  "processedSize": 280,
  "dataUri": "data:image/webp;base64,UklGR...",
  "width": 20,
  "height": 13,
  "bytes": 280,
  "strategy": "blur",
  "html": "<img src=\"data:image/webp;base64,UklGR...\" width=\"20\" height=\"13\" alt=\"\" />",
  "css": "background-image: url(data:image/webp;base64,UklGR...);"
}

Notes

The dataUri field contains the complete data URI, ready for use in src attributes or CSS without any additional requests.
The html and css fields provide copy-paste snippets for common use cases.
The blur strategy produces a soft, blurred thumbnail. The pixelate strategy creates a blocky mosaic. The solid strategy returns a single averaged color.
Typical placeholder sizes are 200-500 bytes, making them suitable for inlining directly in HTML.
Height is calculated automatically to preserve the source image's aspect ratio.
HEIC, RAW, PSD, and SVG inputs are automatically decoded before processing.

2.3 KiB Raw Blame History