GenerateImage.js — react Source File

Architecture documentation for GenerateImage.js, a javascript file in the react codebase. 1 imports, 1 dependents.

File javascript BabelCompiler Entrypoint 1 imports 1 dependents 1 functions

Entity Profile

BabelCompiler→ Entrypoint→ GenerateImage.js — react Source File

Dependency Diagram

graph LR
  2d502928_bbd6_55d4_5487_065e9a2748fd["GenerateImage.js"]
  c53575a0_f4b4_c902_8087_01ad687bed52["canvas"]
  2d502928_bbd6_55d4_5487_065e9a2748fd --> c53575a0_f4b4_c902_8087_01ad687bed52
  b27c3f66_c90d_ed18_3ae4_582f9ff3b4e6["App.js"]
  b27c3f66_c90d_ed18_3ae4_582f9ff3b4e6 --> 2d502928_bbd6_55d4_5487_065e9a2748fd
  style 2d502928_bbd6_55d4_5487_065e9a2748fd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {createCanvas} from 'canvas';

export async function GenerateImage({message}) {
  // Generate an image using an image library
  const canvas = createCanvas(200, 70);
  const ctx = canvas.getContext('2d');
  ctx.font = '20px Impact';
  ctx.rotate(-0.1);
  ctx.fillText(message, 10, 50);

  // Rasterize into a Blob with a mime type
  const type = 'image/png';
  const blob = new Blob([canvas.toBuffer(type)], {type});

  // Just pass it to React
  return <img src={blob} />;
}