Tegne med Canvas for å generere bilder

  • Grafikk

Bruk skia-canvas for å kunne gjøre bilde generering server side.

Canvas støtter tekst og bilder som input, som gjør det ypperlig for automatisk generering støtte bilder for innhold

Dette bildet er generert automatisk ved bruk av canvas api’et
// Lag en ny 2d canvas
const canvas = new Canvas(width, height);
const context = canvas.getContext("2d");

// Sett bakgrunnen
context.fillStyle = designTokens.colors.dark;
context.fillRect(0, 0, canvas.width, canvas.height);

// Pass på at tekst ikke flyter over
context.textWrap = true;

// Skriv en stor tekst
context.font = "bold 2.5rem Menlo";
context.textAlign = "left";
context.fillStyle = "rgb(209 213 219)";
context.fillText("Hello, World", 32, 32);

// Lag en artig figur
const tagColor = input.tags.map((x) => x.color)[0];
context.fillStyle = "rgb(253 230 138)";
context.globalAlpha = 0.4;
context.beginPath();
context.moveTo(canvas.width, 0);
context.lineTo(canvas.width / 2 - 100, canvas.height);
context.lineTo(canvas.width - 230, canvas.height - 230);
context.fill();
context.save();
context.globalAlpha = 1;

Referanser