下載 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 腳本輕松識別的模式。