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

This topic created in 1175 days ago, the information mentioned may be changed or developed.

我看到 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 replies • 2023-02-28 18:46:22 +08:00

Rache1

Feb 28, 2023

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

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

AoEiuV020CN

Feb 28, 2023

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

pdog18

Feb 28, 2023

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

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

pdog18

Feb 28, 2023

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

pdog18

Feb 28, 2023

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