Javascript 如何在每天18:00时截屏并以文件名中的增量数字保存到硬盘，或不覆盖文件？
我遵循上面的答案，但没有文件可以保存在本地硬盘上。 如何在没有安装外部软件的情况下使用javascriptJavascript 如何在每天18:00时截屏并以文件名中的增量数字保存到硬盘，或不覆盖文件？,javascript,google-chrome,microsoft-edge,Javascript,Google Chrome,Microsoft Edge,我遵循上面的答案，但没有文件可以保存在本地硬盘上。 如何在没有安装外部软件的情况下使用javascript Edge on windows C:\Users\hello\AppData\Local\Packages\Microsoft.MicrosoftEdge_8wekyb3d8bbwe\AC#!001\MicrosoftEdge\User\Default\DOMStore\IS3DHS80 Chrome on windows: %LocalAppData%\Google\Chrome\Us
Edge on windows
C:\Users\hello\AppData\Local\Packages\Microsoft.MicrosoftEdge_8wekyb3d8bbwe\AC#!001\MicrosoftEdge\User\Default\DOMStore\IS3DHS80
Chrome on windows:
%LocalAppData%\Google\Chrome\User Data\Default\Local Storage\
<html>
<body bgcolor="#000000">
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
function save() {
let region = document.querySelector("body"); // whole screen
html2canvas(region, {
onrendered: function(canvas) {
//let pngUrl = canvas.toDataURL(); // png in dataURL format
//let img = document.querySelector(".screen");
//img.src = pngUrl;
var dat = new Date();
var a = document.createElement("a");
a.href = canvas.toDataURL('image/png');
a.download = dat.toString() + "_MRTG.png";
a.hidden = true;
document.body.appendChild(a);
a.innerHTML = "random";
a.click();
},
});
};
setTimeout(function(){
var today = new Date();
hours = today.getHours();
minutes = today.getMinutes();
if(hours === 18 && minutes === 0){
//save();
let b = document.querySelector("capt");
b.click();
setTimeout(console.log(""),5000);
};
window.location.reload(1);
}, 30000);
</script>
<button onclick="save()" id="capt">Screen Capture</button>
<div id="capture">
<div class="container" id="containerr">
<img width="75%" class="screen">
</div>
</body>
</html>
我看不到您在代码中保存图片的位置，代码中有错误。如果我在浏览器中运行代码，我可以在控制台中看到“容器未定义”。我认为您应该使用F12开发工具来检查控制台中的错误，并首先纠正它们 您可以使用Microsoft Edge（EdgeHTML）中的msSaveBlob和Chrome中的createObjectURL保存屏幕截图并使用日期时间命名图像文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>Screenshot tester</div>
<button onclick="report()">Take screenshot</button>
<div class="container" id="containerr">
<img width="75%" class="screen">
</div>
<a id="dlink" href="#" style="display:none;">download link</a>
<script>
function report() {
var d = new Date();
var n = d.getTime();
let region = document.querySelector("body"); // whole screen
html2canvas(region, {
onrendered: function (canvas) {
let pngUrl = canvas.toDataURL(); // png in dataURL format
let img = document.querySelector(".screen");
img.src = pngUrl;
imgs = new Image();
imgs.id = "containerr";
imgs.src = img.src;
//save file
if (window.navigator.msSaveBlob) {
//IE11 & Edge
var blobdata = canvas.msToBlob();
window.navigator.msSaveBlob(blobdata, n + ".png");
}
else {
//Other browsers
canvas.toBlob(function (blob) {
$("#dlink").attr("href", window.URL.createObjectURL(blob));
$("#dlink").attr("download", n + ".png")
$("#dlink")[0].click();
});
}
}
});
}
</script>
</body>
</html>
截图测试器
截图
<script src="download.js"></script>
function save() {
let region = document.querySelector("body"); // whole screen
html2canvas(region, {
onrendered: function(canvas) {
...
a.click();
if (window.navigator.msSaveBlob) { //If Edge
download(a.href, a.download, 'image/png');
}
}
});
};
函数save（）{
让region=document.querySelector（“body”）；//整个屏幕
html2canvas（区域{
onrendered：函数（画布）{
...
a、 单击（）；
if（window.navigator.msSaveBlob）{//if边
下载（a.href，a.download，'image/png'）；
}
}
});
};
export now=$(date +"%m_%d_%Y") && xdg-open http://www.yahoo.com && sleep 10 && gnome-screenshot > $now.png
它假定要加载的页面将在10秒内加载，并且默认浏览器配置了足够低的缩放级别，使整个页面清晰可见。有两个问题，第一个是捕获，然后是保存 window.navigator.msSaveBlob是非标准和过时的，可能无法正常工作，我认为这就是它无法正常工作的原因 我有一个想法，想和你分享。开发一个chrome扩展，配置为允许在你选择的域上运行（如果你只想在你的网站上运行）。它可以轻松地对您的内容执行DOM操作，并且能够将文件写入并存储到用户的本地文件系统中。有关详细信息，请查看此处 否则HTML5F应该可以正常工作
localstorage.root.getFile("screenhot-25112019.PNG", {create: true});
但是，它会将您的范围限制在chrome上。您可以尝试将该文件放入年度文件夹中。这样你会让一切变得更有条理，不会有冲突，因为每个月和每一天都是独一无二的 您可以通过使用下面的javascript代码来实现这一点。 这会将页面转换为画布，然后您可以触发下载。它还支持不同的选项，例如ignoreElements和timeout。您可以在此处检查所有可用的配置 你可以在小提琴上检查工作代码
您可以使用自动化框架，如selenium。您可以用java实现该解决方案 使用此答案中的代码，您可以拍摄您喜欢的页面的屏幕截图：
WebDriver driver = new ChromeDriver();
driver.get("http://www.google.com/");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
// Now you can do whatever you need to do with it, for example copy
somewhere
FileUtils.copyFile(scrFile, new File("c:\\tmp\\screenshot.png"));
LocalTime time = LocalTime.now();
if(time.compareTo(LocalTime.parse("18:00") > 0){
//take the screenshoot
//save the file
//wait some time
}
WebDriver driver = new ChromeDriver();
driver.get("http://www.google.com/");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
// Now you can do whatever you need to do with it, for example copy
somewhere
FileUtils.copyFile(scrFile, new File("c:\\tmp\\screenshot.png"));
LocalTime time = LocalTime.now();
if(time.compareTo(LocalTime.parse("18:00") > 0){
//take the screenshoot
//save the file
//wait some time
}
更多信息您可以参考selenium文档：I保存在文件：\\\c:\User\hello\Documents\screen.png，我使用了html2canvas并成功截屏并保存为png，但截屏结果显示截屏结果中缺少图像，我搜索它是0.4.1错误，但在尝试了选项之后，仍然无法在web上捕获图像，最新版本的html2canvas甚至比0.4.1旧版本还要差，它完全可以保存为png图像。你可以问一个新问题，并提供你遇到的问题的详细信息，带有可复制的代码和错误消息。我测试更新的代码。它可以在Chrome中很好地工作，屏幕捕获效果也很好。但是，您的代码无法在Edge中工作，这是因为Microsoft Edge（EdgeHTML）不支持为您导航到数据URI。您可以使用在Edge中下载该文件。但是，Edge仍然会弹出“打开或保存”对话框，您必须手动单击它。您可以查看我的更新答案。我在窗口中，尝试后没有UBUNTUA，但没有弹出新窗口，