A bit of a toy image creator that can be used anywhere images can be, but is intended for social share images in og:image or twitter:image meta tags.

In a live web page

• Live example https://tylergaw-socialimageusage.web.val.run/
• Live example Val https://www.val.town/v/tylergaw.socialImageUsage

Default

This will set the og:image of a web page to a png image of an orange 1200x600 pixel rectangle

<meta property="og:image" content="https://tylergaw-socialimage.web.val.run/">

Works the same way as an embedded image

<img src="https://tylergaw-socialimage.web.val.run/">

Customize with query parameters

General note, some clients are more permissive with unencoded query params than others. It's best to encodeURIComponent for all params.

Available params:

• bg: Sets the background color. Default orange. See Color format examples below for details
• color: Sets the background color. Default black. See Color format examples below for details
• w: Sets the width of the image. Default 1200
• h: Sets the height of the image. Default 600
• text: Sets the text displayed. Default Wellow horld

<meta property="og:image" content="https://tylergaw-socialimage.web.val.run/?bg=pink&w=1000&h=400">

bg and color parameters can any valid color that works with canvas fillStyle in hex, rgb(a), hsl(a), rrggbbaa, etc format.

Note # must be encoded.

• Hex ?bg=%235f0ac7
• rgb(a) ?bg=rgba(100,200,85,0.5)
• rrggbbaa ?bg=%23ff0095d1
• hsl(a) ?bg=hsla(100,100%25,50%25,0.5)