11

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?

maria
  • 207
  • 5
  • 22
  • 56

3 Answers3

14

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

Oliver Barnwell
  • 491
  • 4
  • 18
  • 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. – maria Apr 30 '15 at 16:55
  • yourimagesharingserver would be etg: www.example.com/postlink ? – maria Apr 30 '15 at 17:02
  • Yes. I should've been clearer with that, I'll update my answer to be more detailed. – Oliver Barnwell Apr 30 '15 at 17:06
  • regarding yourlinkuploadserver , would that be the same? – maria Apr 30 '15 at 17:21
  • "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. – Oliver Barnwell Apr 30 '15 at 17:22
  • 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. – phani Jun 27 '18 at 12:17
4

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

liamness
  • 742
  • 3
  • 5
1

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.

Community
  • 1
  • 1
Emmanuel DAWNGHIT
  • 11
  • 1