下载html2canvas图像到指定的文件路径

Question

export default class Thumbnail {
getThumbnail(canvas) {
html2canvas(canvas)
.then((canvas) => {
this.saveAs(canvas, 'thumbnail.png');
}).catch(function(err) {
console.log(err);
})
}
saveAs(canvas, filename) {
let link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
window.open(canvas);
} 
}
}

我已经创建了一个模块缩略图将canvas标记作为参数，以便在从html脚本标记调用时获取指定区域的屏幕截图(因此每当我刷新本地页面时，它都会调用模块)

据我所知，html2canvas将图像保存到下载文件夹中作为默认值。如果我想将图像保存到特定的文件路径我该怎么办?

例如，如果我想将图像保存到文件路径为的文件夹中。/Desktop/Project/Assets/Thumbnail有没有办法在代码里面添加这样的命令?

Answer 1

任何浏览器都不允许。

作为页面作者，您无法控制文件保存的位置。这既是为了安全和隐私，也是为了用户偏好。

这适用于所有下载，而不仅仅是由html2canvas包创建的文件。

---

如果你正在构建一个只有你会使用的工具(听起来像你)，你可以通过编写一个非web shell脚本来实现相同的结果，该脚本监视你的下载目录，并在这些文件出现时将它们移动到特定的位置。

要做到这一点，您需要为所有的屏幕截图命名，这些截图遵循一种您可以在shell脚本中轻松识别的模式。