Generating images in Workers

interface Env {
  BUCKET: R2Bucket;
}

export const onRequest: PagesFunction<Env> = async (context) => {
  const canvas = document.createElement("canvas");

  canvas.width = 200;
  canvas.height = 200;

  const ctx = canvas.getContext("2d");

  if (ctx === null) {
    return new Response(null, { status: 500 });
  }

  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText("text", canvas.width / 2, canvas.width / 2);

  const dataUrl = canvas.toDataURL("image/jpeg");
  const blobData = dataURItoBlob(dataUrl);

  await context.env.BUCKET.put("my-image.jpeg", blobData);

  return new Response(null, { status: 200 });
};

function dataURItoBlob(dataURI: string) {
  const binary = Buffer.from(dataURI.split(",")[1], "base64").toString();
  const array = [];

  for (let i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }

  return new Blob([new Uint8Array(array)], { type: "image/jpeg" });
}

interface Env {
  BUCKET: R2Bucket;
}

export const onRequest: PagesFunction<Env> = async (context) => {
  const canvas = document.createElement("canvas");

  canvas.width = 200;
  canvas.height = 200;

  const ctx = canvas.getContext("2d");

  if (ctx === null) {
    return new Response(null, { status: 500 });
  }

  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText("text", canvas.width / 2, canvas.width / 2);

  const dataUrl = canvas.toDataURL("image/jpeg");
  const blobData = dataURItoBlob(dataUrl);

  await context.env.BUCKET.put("my-image.jpeg", blobData);

  return new Response(null, { status: 200 });
};

function dataURItoBlob(dataURI: string) {
  const binary = Buffer.from(dataURI.split(",")[1], "base64").toString();
  const array = [];

  for (let i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }

  return new Blob([new Uint8Array(array)], { type: "image/jpeg" });
}