Screenshot Chess Boards
Problem: I'd like to programatically take screenshots of chess board positions on https://lichess.org, ideally via a button added to the page or via a browser extension.
Here's an example board: https://lichess.org/training/elsB3
As you can see the board has the class .main-board.
There are three approaches I'm trying:
1. Using Chrome's DevTools
This is pretty straight forward:
- Inspect element
- Cmd + Shift + P
- Type 'screenshot' and click on 'Capture Node Screenshot'
Works pretty well, but I can't figure out how to programatically interact with the DevTools screenshot option.
2. Using puppeteer and chromium
The code below works as a PoC to grab the board.
const puppeteer = require("puppeteer");
(async function () {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('https://lichess.org/training/YxqlF', {waitUntil: 'networkidle2'});
const el = await page.$('.main-board');
fname = "board_" + Date.now() + ".png"
console.log("Saving chess board as " + fname)
await el.screenshot({ path: fname});
})();
Useful, but I'd like to be able to do this with code added to lichess (or via an extension). This approach is fine for me, but hard to share with others who'd want to use it (requiring setting up puppeteer and chromium). Also, chromium crashed numerous times when doing the above. This lead me to the third option:
3. Using html2canvas
This is the one I can't get working that I'd like help on. I attempt to grab an image of the board with:
html2canvas(document.getElementsByClassName("main-board")[0]).then(function(canvas) {
//document.body.appendChild(canvas);
var img = canvas.toDataURL()
window.open(img);
});
but the resultant image looks like this:
I suspect the css isn't being handled properly, and I'm not sure why (perhaps browser security hurdles?). No errors in the browser console.
I'd appreciate any help or advice anyone can offer. Thanks in advance.
