如何使用 FileSystemFileHandle 接口从 base64 字符串创建和写入图像文件答案

【问题标题】：How to create and write an image file from a base64 string using FileSystemFileHandle interface如何使用 FileSystemFileHandle 接口从 base64 字符串创建和写入图像文件
【发布时间】：2022-10-14 23:27:35
【问题描述】：

我有一个 base64 字符串，我正在尝试使用 Javascript FileSystemFileHandle 接口创建图像文件。

Name 是来自页面文本框中的字符串，用于命名文件，content 是带有 'data:image/jpg;base64' 的字符串，后跟 base64 字符串。在getNewFileHandle函数中成功创建了文件句柄，但是当我将图像写入文件后打开文件时，windows说文件格式不支持。

async function saveNewFile(name, content) {
    let fileHandle = await getNewFileHandle(name);

    const file = await fileHandle.createWritable();

    await file.write(content);

    await file.close();

    return;
}

用于创建文件句柄的函数与here 相同，只是为文件提供了建议的名称。我可以确认它确实创建了一个文件。

 //Creates Save File Window, creates writable file. Called from saveNewFile
    async function getNewFileHandle(name) {
        const opts = {
            suggestedName: name,
            types: [{
            description: 'Image file',
            accept: {'application/octet-stream': ['.jpg']},
          }],
        };
        return await window.showSaveFilePicker(opts);
      }

界面不允许写入图像吗？我可以创建一个可以成功下载图像的超链接，但是让保存文件选择器出现很重要。

【问题讨论】：

标签： javascript image file

【解决方案1】：

没关系，我想通了。我必须为 base64 数据创建一个 blob。

【讨论】：