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?

Cointon

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

Ozone

would it be possible for you to provided this within the html2canvas api? since i do not know where to put this code / integrate with the api. – Cointon

yourimagesharingserver would be etg: www.example.com/postlink ? – Cointon

Yes. I should've been clearer with that, I'll update my answer to be more detailed. – Ozone

regarding yourlinkuploadserver , would that be the same? – Cointon

"yourlinkuploadserver" would be a URL pointing to the server that you have created to store the link to the image you uploaded to imgur. On the server side you would parse the POST'ed information to retrieve the url to the imgur link. – Ozone

I tried with canvas the screenshot was coming but the problem was I have to take video screenshot on that time it was not give video effect can any help me out it. – Expectoration

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

Aquatic

Depends entirely on what backend technologies you are using. PHP, Python, .NET etc all have ways to decode Base64 strings and create files though. – Aquatic

how would it be with php. – Cointon

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.

Herwick