Create PNG or Buffers of Chess Positions.

Cause you can generate more visually appealing Chess Boards with the new added pieces!

Pieces: Neo
Light: #EEEED2
Dark: #769657

Pieces: Glass
Light: #D9E2E8
Dark: #7093A9

Pieces: Game Room
Light: #91B5A4
Dark: #6E9281

Pieces: Wood
Light: #F0D9B5
Dark: #B58863

chess-fen2img creates a PNG file or PNG Buffer from either a:

• FEN
• PGN
• array data

Passed in options allow you to choose:

• size of the canvas
• colors of board
• style of pieces

Output to either:

• a PNG to given path
• PNG Buffer

• Installation
• Loading in a Chess Position
  • FEN
  • PGN
  • Array of Characters
  • Highlighting Squares
• Generating Images
  • into PNG
  • into Buffer
• Image Customization
  • Canvas Size
  • Padding
  • Board Colors
  • Piece Style
  • Board POV
  • Rank & File Notations
• Dependencies

Install via node:

$ npm i -S chess-fen2img

Then import the package and instantiate:

var ChessImageGenerator = require('chess-fen2img');

var imageGenerator = new ChessImageGenerator();

or pass in options for customization:

var ChessImageGenerator = require('chess-fen2img');

var imageGenerator = new ChessImageGenerator({
    size: 720,
    light: 'rgb(200, 200, 200)',
    dark: '#333333',
    style: 'merida',
    flipped: true,
    notations: true,
});

Load in your chess position with one of three methods depending on the format of your board position, and export to PNG file or Buffer.

Once you've created an instance of the chess-fen2img, you can load a chess position using one of three formats.

• Forsyth–Edwards Notation (FEN)
• Portable Game Notation (PGN)
• Array of Characters

.loadFEN(fen)

FEN appears in the follow format:

r2qk2r/p1p5/bpnbp2p/1N1p1p2/P2P1p1N/2PQ2P1/1P2PPBP/R4RK1 b kq - 1 13

Each piece is notated by a character.

.loadPGN(pgn)

PGN appears in the follow format:

[Event "F/S Return Match"]
[Site "Belgrade, Serbia JUG"]
[Date "1992.11.04"]
[Round "29"]
[White "Fischer, Robert J."]
[Black "Spassky, Boris V."]
[Result "1/2-1/2"]

1. e4 e5 2. Nf3 Nc6 3. Bb5 a6 {This opening is called the Ruy Lopez.}
4. Ba4 Nf6 5. O-O Be7 6. Re1 b5 7. Bb3 d6 8. c3 O-O 9. h3 Nb8 10. d4 Nbd7
11. c4 c6 12. cxb5 axb5 13. Nc3 Bb7 14. Bg5 b4 15. Nb1 h6 16. Bh4 c5 17. dxe5
Nxe4 18. Bxe7 Qxe7 19. exd6 Qf6 20. Nbd2 Nxd6 21. Nc4 Nxc4 22. Bxc4 Nb6
23. Ne5 Rae8 24. Bxf7+ Rxf7 25. Nxf7 Rxe1+ 26. Qxe1 Kxf7 27. Qe3 Qg5 28. Qxg5
hxg5 29. b3 Ke6 30. a3 Kd6 31. axb4 cxb4 32. Ra5 Nd5 33. f3 Bc8 34. Kf2 Bf5
35. Ra7 g6 36. Ra6+ Kc5 37. Ke1 Nf4 38. g3 Nxh3 39. Kd2 Kb5 40. Rd6 Kc5 41. Ra6
Nf2 42. g4 Bd3 43. Re6 1/2-1/2

Chess.com's Published-Data API returns games in this format. If you want to use their API check out the chess-web-api wrapper I created for it!.

.loadArray(array)

Array should be passed with the following format:

[
    ['r','n','b','q','k','b','n','r',],
    ['p','p','p','p','p','p','p','p',],
    [' ',' ',' ',' ',' ',' ',' ',' ',],
    [' ',' ',' ',' ',' ',' ',' ',' ',],
    [' ',' ',' ',' ',' ',' ',' ',' ',],
    [' ',' ',' ',' ',' ',' ',' ',' ',],
    ['P','P','P','P','P','P','P','P',],
    ['R','N','B','Q','K','B','N','R',],
]

Piece notation follows the same rules as FEN.

.highlightSquares(array)

imageGenerator.highlightSquares(["e4", "e5"])

After you've loaded a chess position into an instance of the chess-fen2img, use the following functions to generate your image with one of two outputs:

• PNG with Path
• PNG Buffer

.generatePNG(path)

The path should be relative to where it is called and include the end name of the PNG.

A new PNG file will be generated with position.

.generateBuffer()

The buffer will be returned from the function. Use promises or async await to ensure its completion.

You have several options for customization of the resulting PNG:

• Canvas Size
• Padding
• Board Colors
• Piece Style
• Board POV
• Rank & File Notations

These customizations are passed to the constructor when you create an instance of chess-fen2img:

var imageGenerator = new ChessImageGenerator({
    size: 720,
    padding: [10, 10, 10, 10],
    light: 'rgb(200, 200, 200)',
    dark: '#333333',
    style: 'merida',
    flipped: true,
    notations: true,
});

Canvas size determines in pixels how large the resulting PNG will be.

var imageGenerator = new ChessImageGenerator({
    size: 1200,
});

The resulting PNG's will be 1200px by 1200px.

Padding determines in pixels how much padding is added to each side of the board. The values are in order of top, right, bottom and left.

var imageGenerator = new ChessImageGenerator({
    padding: [10,10,10,10],
});

The resulting PNG's will have a padding of 10px on each side, increasing the image width and height by 20px.

Light and dark determines the colors of both the light and dark squares respectively. Highlight determines the color overlaid on top of any highlighted squares (using a RGBA value with some transparency is recommended so that light and dark squares are still distinguishable from one another if highlighted).

Colors can be passed in a variety of formats:

var imageGenerator = new ChessImageGenerator({
    style: "neo",
    light: '#EEEED2',
    dark: '#769657',
});

The piece style determines the used style of pieces to create the image.

Determines if the board should be flipped.
If set to false, the image will be from white's point of view. If set to true, the image will be from black's point of view.

Determines if the board should have Rank & File Notations.

var imageGenerator = new ChessImageGenerator({
    style: "neo",
    light: '#EEEED2',
    dark: '#769657',
    flipped: true,
    notations: true,
});

• neo

• game_room

• glass

• wood

• alpha

• cburnett

• cheq

• leipzig

• merida

All images were found at Marcel van Kervinck & GiorgioMegrelli!

var imageGenerator = new ChessImageGenerator({
    style: alpha,
});

• canvas
• canvas-to-buffer
• chess.js
• fs
• path