Building a Customizable Image Generation Tool with Node‑Canvas and Full‑Stack Deployment

The author created a simple emoji‑downloader and a more complex "text‑to‑image" application called AnyPhoto, which lets users generate personalized images via a global npm CLI tool.

Core npm tool : Implemented with commander for command parsing and node‑canvas for drawing. Commands include anyphoto init to generate a configuration file ( anyphoto.config.js ) and anyphoto generate <content> to produce an image based on the config and runtime options such as --avatar , --title , --separator , etc.

The tool supports both local and remote resources for avatars and fonts. Remote fonts are downloaded once, cached locally, and then registered, while avatars are validated via an HTTP HEAD request using axios :

const checkRemoteFileExists = async (remoteUrl, targetType = 'image') => {
  try {
    const response = await axios.head(remoteUrl)
    return response.status === 200 && response.headers['content-type'].startsWith(`${targetType}/`)
  } catch (error) {
    return false
  }
}

const isValidAvatar = path.isAbsolute(handleAvatar) ? true : await checkRemoteFileExists(handleAvatar)

Configuration files can be placed at the project root or any upper directory; the tool searches upward to find the nearest config, allowing consistent styling across multiple projects.

Visualization website : Built with React, Material‑UI, TypeScript, and React Router. It provides a UI for users to input content, select themes, avatars, and fonts, then preview the generated image. State management is handled with Context and useReducer, avoiding heavy libraries.

Backend services : Developed with Express, using libraries such as bcryptjs , crypto-js , jsonwebtoken , and xss . MongoDB (via Mongoose) stores user data and generation history. The server runs under PM2 for zero‑downtime restarts.

Private npm registry : Verdaccio is used locally to host the unpublished AnyPhoto package, enabling installation via npm link ‑like workflows without publishing to the public registry.

CI/CD : GitHub Actions automate building, testing, and deploying both frontend static assets and backend code. Jobs include check‑changed‑files to run only the necessary deployment steps, and send‑email to notify the author of build results.

Server setup : The static site is served behind Nginx with HTTPS (SSL certificates), while API requests are proxied to the Express server running on port 3001. Domain configuration and DNS mapping are described, and PM2 ensures the backend stays online.

The article concludes with reflections on the learning journey, encourages readers to experiment with the tool, and invites collaboration on extending the project to mini‑programs.