使用File System Access API访问文件
最新的File System Access API可以访问文件系统,完成文件的读取和保存。
使用
window.showOpenFilePicker
获取fileHandle
,完成文件的读取。const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const content = await file.arrayBuffer();
const blob = new Blob([content], { type: 'image/png' });
const img = document.createElement('img');
document.body.appendChild(img);
img.src = URL.createObjectURL(blob);
使用
window.showSaveFilePicker
获取handle
,完成文件的保存。const handle = await window.showSaveFilePicker({
types: [{
description: 'Test files',
accept: {
'image/png': ['.png']
}
}]
});
const writable = await handle.createWritable();
await writable.write(content);
await writable.close();
这个Demo展示了如何加载图片和保存图片。