lichess.org

Chess Diagram Generator - export analysis board or a chess position from lichess to a jpg/png image

It would be nice to have a simple option to save any chessboard on lichess (at least the analysis board) to an image file...


in my wildest dreams it would be possible to save the board with the coloured arrows and circles, which side is to move, and on the bottom space for one textline, for example "1. ... ? +-", or "Steinitz - Carlsen 1965 Paris" ;-)
But simply saving the board to image file would be great.

best regards

Sput

That's an interesting request.

Note that you can do it this way until that exists:
1. Download a specific game: lichess.org/api#operation/gamePgn
2. Import the game PGN with Scid vs PC http://scidvspc.sourceforge.net/
3. Then go through the moves, arrive at a position you want a picture of
4. Press Control-F12 (same as going to Tools -> Board Screenshot)
5. Caption whatever you like on your web page (with Wordpress, you can download that Image and caption it within Wordpress image upload, although there are PGN and FEN plugins)

I'm working on a project that is an alternative to lichess study:

pgneditor.herokuapp.com

I'm considering possibilities for exporting the board as a sceenshot.

I can draw SVG / image on a canvas, I can offer a canvas for download, so the ingredients are there.

This is my JsFiddle study, demonstrating these capabilities ( it can use a background image loaded from a CORS enabled server, which is not trivial, because without care this runs into tainted canvas error ):

jsfiddle.net/3apoztjn/

Unfortunately the out of the box solution does not work for me:

html2canvas.hertzen.com/

The above project does not render my pieces, which are represented using CSS background-image. This is strange because in theory the project supports the background-image property.

Okey, dokey, I can export now a board screenshot with arrows:

https://i.imgur.com/xV18OW6.png

You can try this for yourself, open the app, make a few moves, then Tools / Export board screenshot.

Of course this has to be refined, I need to add background image for board material.

Now you can open a drawing toolbar, and start drawing on the board ( all drawings are remembered in the study ):

https://i.imgur.com/iE4h60V.png

The board can be exported together with the drawings:

https://i.imgur.com/p8n8oZT.png

This tool is already useful for creating and exporting chess diagrams.

YUGE YUGE upvote for this project:

github.com/jnordberg/gif.js

This is what I call a business like, straightforward, no-nonsense Javascript library. It takes ages to create a gif from images at giphy compared to what this library can do. You can create a frame directly from a canvas. This is exactly what I needed.

Animated demonstration ( also can be created from existing PGN with comments ):

https://i.imgur.com/Jo15WLr.gif

You can't post in the forums yet. Play some games!

Reconnecting