使用带有png扩展名的html2canvas捕获网页的屏幕截图 [英] Capture the screenshot of a webpage using html2canvas with png extension
问题描述
如何使用带有png扩展名的html2canvas捕获网页的截图，并将其保存在本地文件夹中？
我尝试了下面的代码。它会以文件名 download 保存截图，但不包含png / jpeg扩展名。任何方式使它工作？我还想将截图保存到本地文件夹。
< 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 / javascriptsrc =http://code.jquery.com/jquery-1.9.0.min.js>< / script>
< script type =text / javascriptsrc =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>测试< / h1>
< h4>一栏：< / h4>
< table border =1>
< tr>
< td> 100< / td>
< / tr>
< / table>
< br />
< / div>
< input type =buttonvalue =Saveid =load/>
< / body>
< / html>
var save = document.createElement（'a'）;
save.href = data;
save.target ='_blank';
save.`代码here`download ='fileName';
var event = document.createEvent（'Event'）;
event.initEvent（'click'，true，true）;
save.dispatchEvent（event）;
（window.URL || window.webkitURL）.revokeObjectURL（save.href）;
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);
这篇关于使用带有png扩展名的html2canvas捕获网页的屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
