convert text to text-image

text2image.ts

interface Options {
  fontFamily?: string;
  fontSize?: number;
}

export default function text2image(text: string, opts?: Options) {
  const { fontFamily = "serif", fontSize = 14 } = opts || {};
  // high ratio, high dpi
  const ratio = Math.max(window.devicePixelRatio || 4, 4);
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d")!;
  context.scale(ratio, ratio);
  context.font = `${fontSize}px ${fontFamily}`;
  context.fillStyle = "#000";
  const textMetrics = context.measureText(text);
  //
  canvas.style.width = `${textMetrics.width}px`;
  canvas.style.height = `${textMetrics.fontBoundingBoxAscent}px`;
  canvas.width = textMetrics.width * ratio;
  canvas.height = textMetrics.fontBoundingBoxAscent * ratio;
  context.scale(ratio, ratio);
  context.font = `${fontSize}px ${fontFamily}`;
  context.fillStyle = "#000";
  context.fillText(
    text,
    0,
    textMetrics.fontBoundingBoxAscent - textMetrics.actualBoundingBoxDescent
  );
  return canvas.toDataURL("image/png", 1.0);
}