//here is the hero, after the capture button is clicked
//he will take the screen shot of the div and save it as image.
$('#capture').click(function(){
//get the div content
div_content = document.querySelector("#canvas")
//make it as html5 canvas
html2canvas(div_content).then(function(canvas) {
//change the canvas to jpeg image
data = canvas.toDataURL('image/jpeg');
//then call a super hero php to save the image
save_img(data);
});
});
});
//to save the canvas image
function save_img(data){
//ajax method.
$.post('save_jpg.php', {data: data}, function(res){
//if the file saved properly, trigger a popup to the user.
if(res != ''){
yes = confirm('File saved in output folder, click ok to see it!');
if(yes){
location.href =document.URL+'output/'+res+'.jpg';
}
}
else{
alert('something wrong');
}
});
}