使用Filesystem API保存canvas截图为有效本地图片的问题咨询

开发集成Three.js Renderer的Web应用时，需要将渲染生成的截图存储到本地文件系统指定位置，当前渲染、截图生成功能正常，仅存储下载环节存在异常。
截图生成代码如下：

let imageData = renderer.domElement.toDataURL('image/png');
console.log(imageData); // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABFAAAANBC...

已测试的下载方案问题如下：

• 直接跳转Data URL触发下载：使用window.location.href = imageData;会触发多次浏览器安全告警，下载文件默认命名为download、存储到系统Download目录，需手动添加.png后缀才能打开，连续下载时文件辨识度极低，实用性差。
• 构造隐藏<a>标签触发点击下载：实现代码如下

  let a_element = document.createElement('a');
  a_element.setAttribute('href', imageData.replace('image/png', 'image/octet-stream'));
  a_element.setAttribute('download', 'screenshot.png');
  a_element.style.display = 'none';
  document.body.appendChild(a_element);
  a_element.click();
  document.body.removeChild(a_element);
  

  该方案支持自定义下载文件名，但无法指定存储目录，仍需手动移动文件。
• 使用File System Access API实现自定义路径存储：实现代码如下

  const options = {
      types: [
          {
          description: 'Images',
          accept: {
              'image/png': ['.png'],
          },
          },
      ],
      suggestedName: 'Screenshot.png',
  };
  imgFileHandle = await window.showSaveFilePicker(options);
  console.log("Save File chosen");
  const writable = await imgFileHandle.createWritable();
  await writable.write(imageData);
  await writable.close();
  

  该方案代码可正常执行无报错，但存储出的文件不是有效PNG图片，文件内容为和控制台输出完全一致的Data URL文本，无法正常打开。

renderer.domElement.toDataURL('image/png')返回值是带协议前缀的Data URL字符串，完整格式为data:image/png;base64,<图片二进制内容的base64编码文本>，直接将整个字符串写入文件，写入的是纯文本内容，而非PNG格式要求的二进制数据，因此图片无法被系统识别。

写入文件前，需要先将Data URL转换为PNG格式的二进制Blob对象，再执行写入操作，两种常用实现方式任选其一即可：

方式1：原生API手动转换（兼容性最好） #

// 剥离Data URL前缀，获取纯base64编码内容
const pureBase64 = imageData.split(',')[1];
// 解码base64为二进制字符串，再转换为Uint8Array字节数组
const binaryStr = atob(pureBase64);
const byteArray = new Uint8Array(binaryStr.length);
for (let i = 0; i < binaryStr.length; i++) {
    byteArray[i] = binaryStr.charCodeAt(i);
}
// 构造PNG类型的Blob对象
const pngBlob = new Blob([byteArray], { type: 'image/png' });

// 写入文件时替换为Blob对象即可
const writable = await imgFileHandle.createWritable();
await writable.write(pngBlob);
await writable.close();

方式2：fetch快速转换（代码更简洁） #

// 直接请求Data URL即可拿到解析好的Blob对象
const pngBlob = await fetch(imageData).then(res => res.blob());

// 执行写入
const writable = await imgFileHandle.createWritable();
await writable.write(pngBlob);
await writable.close();

额外提示：你之前写的a标签下载代码存在语法错误，imageData.replace('image/png', 'image/octet-stream' 缺少闭合右括号，补上)后才能正常运行。

内容的提问来源于stack exchange，提问作者nhaggen