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?
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments