如何从 blob:chrome-extension 获取 blob 数据？答案

【问题标题】：How to get blob data from blob:chrome-extension?如何从 blob:chrome-extension 获取 blob 数据？
【发布时间】：2021-05-23 13:20:17
【问题描述】：

我正在尝试在 image.src 中使用它..

“blob:chrome-extension://enjilmhmplefekkpbciadkljojpakhmd/cb5a1692-5194-4a3d-afd4-85b27445de94”

这是从我正在使用的 js 库中检索到的，该库加载带有二进制数据的本地文件。但是，我需要获取 blob 数据才能将其转换为 dataurl（我认为）..

如何使用 javascript 获取 blob 数据？（如果重要的话，我也在使用 nw.js）

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/FileReader/… 这可能对你有帮助。
我尝试了 filereader，但它给出了错误：“TypeError：无法在 'FileReader' 上执行 'readAsDataURL'：参数 1 不是 'Blob' 类型。”
似乎在我的库中某处它正在执行 URL.revokeObjectURL(sourceURI);就可以了，所以我想在我可以使用数据之前删除图像？？

标签： javascript node-webkit

【解决方案1】：

如果您使用的是 NW.js 并且有实际文件，则只需使用 Node.js 文件系统模块。

<img id="cat">
<script>
  const fs = window.nw.require('fs');
  const path = window.nw.require('path');

  function getImageURI (imagePath) {
    try {
      const imageData = fs.readFileSync(imagePath);
      return 'data:image/png;base64,' + imageData.toString('base64');
    } catch (error) {
      console.log('Error reading image', error);
    }
  }

  const catImage = path.join('.', 'some-folder', 'cat.png');
  const catURI = getImageURI(catImage);
  const cat = document.getElementById('cat');
  cat.src = catURI;
</script>

【讨论】：