Skip to content

REPL: saving a thumbnail of the rendered area #388

Open
@mindrones

Description

@mindrones

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

screen shot 2018-12-06 at 19 19 13

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
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions