Public
HTTP (deprecated)
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Readme

Simple image generator

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.

Usage examples

In a live web page

Code examples

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">

Color format examples

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export const socialImage = async (req: Request) => {
const params = new URL(req.url).searchParams;
// Look for values form query params, set defaults
const bgColor = params.get("bg") || "orange";
const width = parseInt(params.get("w"), 10) || 1200;
const height = parseInt(params.get("h"), 10) || 600;
const text = params.get("text") || "Wellow horld";
const textColor = params.get("color") || "black";
try {
const { createCanvas } = await import("https://deno.land/x/canvas/mod.ts");
const canvas = createCanvas(width, height);
const ctx = canvas.getContext("2d");
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, width, height);
if (text) {
ctx.fillStyle = textColor;
ctx.font = "bold 38px sans-serif";
// x and y position is arbitrary right now, this would need improved to actually work
ctx.fillText(text, 60, height - 80);
}
return new Response(canvas.toBuffer(), {
headers: {
"Content-Type": "image/png",
},
});
}
catch (err) {
return err;
}
};
tylergaw-socialimage.web.val.run
October 23, 2023