Social images

Compose to a platform's exact canvas, apply a look, and burn in a caption. The text is rendered by the browser's own text engine, so system fonts, emoji and right-to-left scripts all work without shipping a font file.

Try it

Drop a photo here

Canvas

Preset

Look

Filter

Warmth 0.00

Vignette 0.25

Caption

Text

Size 6%

Colour

Darken behind the caption

Composing with the canvas API

Cover fills the preset exactly, cropping the overflow rather than distorting. The look is a run of per-pixel adjustments, which the optimiser fuses into a single pass over the pixels. The caption is then drawn straight onto the result through ImageCanvas, measured first so the gradient scrim behind it is exactly as tall as the text that wraps.

// Cover fills the canvas exactly, cropping the overflow rather than distorting.var pipeline = ImagePipeline.Create()    .AutoOrient()    .Cover(preset.Width, preset.Height)    .Saturation(0.12f)    .Vignette(0.25f);using var composed = await pipeline.ExecuteAsync(source);// Draw the caption straight onto the pixels with the browser text engine.using var canvas = ImageCanvas.FromBuffer(composed);canvas.FillRectangle(scrimRect, new Rgba32(0, 0, 0, 130));await textRasterizer.DrawTextAsync(canvas, caption, position, new TextStyle{    FontSize  = composed.Height * 0.06f,    Bold      = true,    FillColor = Rgba32.White,    Alignment = TextAlignment.Center,    MaxWidth  = composed.Width * 0.86f,});

BrowserTextRasterizer needs a browser. On a server, register a font with FontTextRasterizer instead - see the Headless API.