How to capture a screenshot of a webpage using html2canvas with png extension, and save it in a local folder?
I tried the following code. It saves the screenshot with the file name download but without a png/jpeg extension. Any way to make it work? I also want to save the screenshot to a local folder.
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script>
<script type="text/javascript">
$(window).load(function(){
$('#load').click(function(){
html2canvas($('#testdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = img;
}
});
});
});
</script>
</head>
<body>
<div id="testdiv">
<h1>Testing</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<br/>
</div>
<input type="button" value="Save" id="load"/>
</body>
</html>
var save = document.createElement('a');
save.href = data;
save.target = '_blank';
save.`enter code here`download = 'fileName';
var event = document.createEvent('Event');
event.initEvent('click', true, true);
save.dispatchEvent(event);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
$(window).load(function(){
$('#load').click(function(){
html2canvas($('#testdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png","image/octet-stream");
url = getImage(dataImage);
window.location.href = img;
}
});
});
});
function getImage(dataImage) {
//var encodedData = window.btoa(html);
var urls = '';
var Data =
{
file: dataImage,
}
$.ajax({
url: "/ColorMyTile/GetUserPatternImage",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: 'POST',
async:false,
//processData: false,
data: JSON.stringify(Data),
success: function (response) {
urls = response;
}
});
return urls;
}
---here is a c# code which convert the stream to image....
[HttpPost]
public JsonResult GetUserPatternImage(string file)
{
string dirPath = Server.MapPath("~//Images//EmailPattern//");
string base64 = file.Substring(file.IndexOf(',') + 1);
base64 = base64.Trim('\0');
var length = base64.Length;
byte[] data = Convert.FromBase64String(base64);
UserPattern objPattern = new UserPattern();
string imgSRC = "";
string Alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const int CharactersCount = 10;
var rng = System.Security.Cryptography.RandomNumberGenerator.Create();
byte[] buffer = new byte[4];
char[] chars = new char[CharactersCount];
//string[] charsColor = model.color.Split(',');
//string[] charsID = model.ids.Split(',');
for (int i = 0; i < chars.Length; i++)
{
rng.GetBytes(buffer);
int nxt = BitConverter.ToInt32(buffer, 0);
int index = nxt % Alphabet.Length;
if (index < 0) index += Alphabet.Length;
chars[i] = Alphabet[index];
}
string ImgName = new string(chars);
using (MemoryStream ms = new MemoryStream(Convert.FromBase64String(base64)))
{
using (Bitmap bm2 = new Bitmap(ms))
{
Color backColor = bm2.GetPixel(0, 0);
bm2.MakeTransparent(backColor);
imgSRC = dirPath + ImgName + ".jpg";
bm2.Save(imgSRC);
}
}
ImgName = ImgName + ".jpg";
return Json(ImgName, JsonRequestBehavior.AllowGet);
}
