html2canvas javascript screenshot and upload

Question

Would it be possible to use html2canvas (This) to take a picture of the user`s screen but also upload the image, get the upload link and send it with ajax to the webserver?

if so, how can i do this?

Answer 1

Yes it is certainly possible to do such a thing.

Firstly use the html2canvas api to take a picture of the user's screen:

html2canvas(document.body).then(function(canvas) {
});

Secondly use the following function to convert the returned canvas image into a base64 encoded URL (defaults to png):

canvas.toDataURL(); 

Specification For canvas.toDataURL

Now construct a request to send your base64 encoded url to an image uploading server (I'm using Imgur as an example).

html2canvas(document.body).then(function(canvas) {
    var dataURL = canvas.toDataURL();
    $.ajax({
        url: 'https://api.imgur.com/3/image',
        type: 'post',
        headers: {
            Authorization: 'yourauthcode'
        },
        data: {
            image: dataURL
        },
        dataType: 'json',
        success: function(response) {
            if(response.success) {
               // Post the imgur url to your server.
               $.post("yourlinkuploadserver", response.data.link);
            }
        }
    });
});

After the image has been uploaded you can POST the URL of the uploaded image to your web server.

Specification for $.post

Specification for $.ajax

Answer 2

This isn't tested, but should work

function screenshot() {
    html2canvas(document.body).then(function(canvas) {
        // post using your favourite xhr polyfill, e.g. jQuery's
        $.post('http://urlgoeshere.com', canvas.toDataURL('image/png'));
    });
}

Then decode the result from base64 on the server side and put in a file

Answer 3

Using the example above, don't forget to add this to the base64url, otherwise it won't work :

var dataURL = canvas.toDataURL().replace(/.*,/, '');

More info here.