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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 637 天前的主题，其中的信息可能已经有所发展或是发生改变。

我看到 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 大概是如何实现的吗？

5 条回复 • 2023-02-28 18:46:22 +08:00

Rache1

2023-02-28 17:34:34 +08:00

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

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

AoEiuV020CN

2023-02-28 17:41:55 +08:00

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

pdog18

2023-02-28 18:39:13 +08:00

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

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

pdog18

2023-02-28 18:43:24 +08:00

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

pdog18

2023-02-28 18:46:22 +08:00

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