REPL: saving a thumbnail of the rendered area

[mindrones]

Usually when we share a REPL example we get a preview like this:

which is not very useful/informative of the shared example. We might then capture a thumbnail of the gist in the gist itself.

This might also improve the search experience.

Tentative/Pseudo Implementation

We might try html2canvas:

// https://stackoverflow.com/a/38936042/582995
function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}

html2canvas(document.querySelector("#render-area"))
.then(canvas => {
    const dataURL = canvas.toDataURL("image/png", 1.0);
    const file = dataURLtoFile(dataURL);
    // upload to the gist
});