Recently, I spent a few days to make a picture to character drawing tool. At first, I wanted to use the server to generate images, but later I found that I could generate images without relying on the server and hosting the project on Github Pages, so I made the project into a pure front-end form.

The warehouse address

Demo address

Welcome star, thank you!

Project description

  • Pure front-end project, independent of server
  • Support JPG, PNG, GIF three formats of images
  • Canvas is used to achieve the analysis, scaling and generation of single frame pictures, and GIF. Js is used to merge single frame pictures into GIF pictures
  • Can scale images equally
  • You can customize text and background colors
  • Customizable character to use during conversion
  • Some of the method implementation references are referenced in the source code

The project uses a technology stack

  • webpack
  • React
  • GIF. Js (for generating GIF images)

The project structure

├─ SRC │ ├─ ├─ SRC │ ├─ ├─ Style │ ├─ tools │ ├─ app.jsx │ ├─ index.html ├─ static │ ├─ SRC │ ├─ SRC │ ├─ ├─ style │ ├─ tools │ ├─ app.jsx │ ├─ index.html ├─ static │ ├─ ├─ garbage ├─ ├─ garbage ├─ garbage ├─ garbage ├─ garbage ├─ garbage ├─ garbageCopy the code

Results demonstrate

The basic function

Image size scaling

Set the color (text and background)

Custom conversion characters

Run locally

Development mode

npm i
npm run devCopy the code

Project package

npm run buildCopy the code

Publish to Github Pages

npm run deployCopy the code