javascript - Unable to show .png extension images

Question

I have this whole snippet over here which essentially, makes a page to domain.com/api/canvas/fake-captcha, but not domain.com/api/canvas/fake-captcha.png / jpg / etc... and I am not sure how to do so. This is supposed to display an Image, that's my issue.

module.exports = {
  name: "/api/canvas/fake-captcha",
  run: async (req, res) => {
    // REQUIREMENTS
    const { createCanvas, loadImage, registerFont } = require('canvas');
    const { CaptchaGenerator } = require("captcha-canvas");

    // CREATE CANVAS
    const canvas = createCanvas(450, 150)
    const ctx = canvas.getContext('2d')

    // VALIDATORS
    const isImageURL = require('image-url-validator');
    const isHexcolor = require('is-hexcolor')
    // FONT
    registerFont("fonts/Montserrat-Bold.ttf", { family: "Montserrat" });

    let randomOpacity = Math.floor((Math.random() * 9) + 1);

    function randomCaptcha(length) {
      var result = '';
      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      var charactersLength = characters.length;
      for (var i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
      }
      return result;
    }

    let captchaCustom = req.query.captcha || randomCaptcha(5);
    let traceCol = req.query.trace_color || "55FFFF";
    let captchaCol = req.query.captcha_color || "55FFFF";

let traceColorC = await isHexcolor('#' + traceCol);

    const captcha = new CaptchaGenerator()
      .setDimension(150, 450)
      .setCaptcha({ text: captchaCustom, size: 60, color: "#" + captchaCol })
      .setDecoy({ opacity: 0. + randomOpacity })
      .setTrace({ color: "#" + traceCol });
    const buffer = captcha.generateSync();

    res.writeHead(200, {
      'Content-Type': 'image/png',
      'Content-Length': captcha.generateSync().length
    });
    res.end(captcha.generateSync());
  }
}

question from:https://stackoverflow.com/questions/65938732/unable-to-show-png-extension-images

Answer 1

Waitting for answers