如何在 Chrome 中编辑本地文件并保存？

[pdog18]

我看到 photopea.com 可以拖动一张图片至网页，可以在线编辑图片，在保存时会申请一次权限，类似这样：

---

Save changes xxx.png?

www.photopea.com will be able toxxx.png until you close all tabs forthis site

Save changes Cancel

---

我尝试搜了下 Drag And Drop 之类的 api ，在保存文件到本地时，大多数都是会弹出一个 [File Select Dialog] ，或者是类似 FileSaver.js 这种，只能将文件下载至 Downloads 文件夹。

似乎也不是 [File System Access]，我记得 [File System Access] 无法修改「系统文件」(只要文件目录满足条件，里面啥都没有都会被 FSA 判断为系统文件，不支持操作)

想问一下有人知道 photopea 大概是如何实现的吗？

[Rache1]

就是 File System Access API ，在代码里面搜 showOpenFilePicker 就能看到了。

另外，因为 Firefox 暂时没有支持，所以在 Firefox 上，保存就是不可用的。

[AoEiuV020CN]

vscode 网页版也有类似操作，
问了下 chatgpt ，提到 showDirectoryPicker 和 showSaveFilePicker ，

[pdog18]

@Rache1
感谢，看到您说的，确实在 pp.js 中搜索到了 showOpenFilePicker

@AoEiuV020CN
我之前也问过 chatgpt ，确实也提到了这两个，但是我简单尝试了一下发现不能实现，看来是我没有理解

[pdog18]

主要我在 issue 里看到过作者提到它说「 I have stopped using the file-system-access API.」就是因为不能修改 「 System File 」，就不太觉得是「 File System Access Api 」

[pdog18]

我又去查看了您说的 vscode 网页版，看起来确实是相同的做法。