下载 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);
    } 
  }
}

我创建了一个模块Thumbnail ，以 canvas 标签作为其参数，以便在从 html 脚本标签调用时截取指定区域的屏幕截图（因此每当我刷新本地页面时，它都会调用该模块）

据我所知，html2canvas 默认将图像保存到下载文件夹。 如果我想将图像保存到特定的文件路径，我应该怎么做？

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

Answer 1

没有 web 浏览器会允许这样做。

作为页面作者，您对文件的保存位置拥有零控制权。 这既关乎安全和隐私，也关乎用户偏好。

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

---

如果您正在构建一个只有您会使用的工具（听起来您确实是），您可以通过编写一个非 Web shell 脚本来监控您的下载目录并将这些文件移动到特殊的它们出现时的位置。

为此，您需要为所有屏幕截图命名，这些名称遵循您可以使用 shell 脚本轻松识别的模式。