Overview

chess-image-generator 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

Documentation

• 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
• Dependencies

Installation

Install via node:

$ npm i -S chess-image-generator

Then import the package and instantiate:

var ChessImageGenerator = require('chess-image-generator');

var imageGenerator = new ChessImageGenerator();

or pass in options for customization:

var ChessImageGenerator = require('chess-image-generator');

var imageGenerator = new ChessImageGenerator({
    size: 720,
    light: 'rgb(200, 200, 200)',
    dark: '#333333',
    style: 'merida',
    flipped: 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.

Loading in a Chess Position

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

Available Formats

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

Loading By FEN

.loadFEN(fen)

| Parameter | Type | Description | |---------|----------|----------------------| | fen | string | Board 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.

| Char | Value | Example | |----------------|-------------------------|--------------------| | Uppercase Char | White Pieces | K, Q, R, B, N, P | | Lowercase Char | Black Pieces | k, q, r, b, n, p | | Slash | New Row | / | | Numbers | Count of blank spaces | 3, 1, 4 |

Loading by PGN

.loadPGN(pgn)

| Parameter | Type | Description | |---------|----------|----------------------| | pgn | string | Game 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!.

Loading by Array

.loadArray(array)

| Parameter | Type | Description | |---------|----------|----------------------| | array | array of arrays | Board array with characters. |

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.

| Char | Value | Example | |----------------|-------------------------|--------------------| | Uppercase Char | White Pieces | K, Q, R, B, N, P | | Lowercase Char | Black Pieces | k, q, r, b, n, p |

Highlighting Squares

.highlightSquares(array)

| Parameter | Type | Description | |---------|----------|----------------------| | array | array of strings | Array of coordinates to highlight. |

Example:

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

Generate an Image

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

• PNG with Path
• PNG Buffer

Generate a PNG

.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.

| Parameter | Type | Description | |---------|----------|----------------------| | path | string | Path of where to save PNG, relative to method call. |

| Return Type | Return Description | |----------|----------------------| | string | Path to PNG |

Generate a Buffer

.generateBuffer()

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

| Return Type | Return Description | |----------|----------------------| | Buffer | PNG Buffer |

Image Customization

You have several options for customization of the resulting PNG:

• Canvas Size
• Padding
• Board Colors
• Piece Style
• Board POV

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

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

Canvas Size

| Option | Type | Default | Example | |----------|----------|---------|------------------| | size | number | 480 | 250, 800, 1200 |

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

Example:

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

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

Padding

| Option | Type | Default | Example | |---------|----------|-----------|---------------| | padding | array | [0,0,0,0] | [10,10,10,10] |

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.

Example:

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.

Board Colors

| Option | Type | Default | Example | |----------|----------|---------|------------------| | light | string | "rgb(240, 217, 181)" | "rgb(250,250,250)", "white", "#ffffff" | | dark | string | "rgb(181, 136, 99)" | "rgb(0,0,0)", "black", "#000000" | | highlight | string | "rgba(235, 97, 80, 0.8)" | "rgb(255,0,0)", "red", "#ff0000" |

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:

| Color Type | Example | |------------------------|------------------------------| | Hexadecimal Color | "#00FF00" | | RGB Color | "rgb(20, 20, 20)" | | RGBA Color | "rgba(20, 20, 20, .8)" | | HSL Color | "hsl(120, 100%, 50%)" | | HSLA Color | "hsla(120, 60%, 70%, 0.3)" | | Predefined Color Names | "blue" |

Default Coloring:

Customized Coloring:

Example:

var imageGenerator = new ChessImageGenerator({
    light: 'rgb(200, 200, 200)',
    dark: 'rgb(20, 20, 20)',
});

Piece Style

| Option | Type | Default | Example | |----------|----------|---------|------------------| | style | string | "merida" | "alpha", "cheq" |

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

Board POV

| Option | Type | Default | Example | |---------|-----------|---------|---------------| | flipped | boolean | false | true, false |

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.

Style Choices:

• alpha

• cburnett

• cheq

• leipzig

• merida

All images were found at Marcel van Kervinck! Thanks :)

Example:

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

Dependencies

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

Hope you make some cool stuff!

- Andrew Young