使用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展示了如何加载图片和保存图片。