readAsDataURL 为 PNG 返回无效的 Base64 字符串，但对于 JPG/JPEG 则不返回

Question

运行 React Native 应用程序，并尝试解决此问题。 b64 被发送到 API 并作为 blob 存储在 db 中，我知道这不是最佳实践，但这不是任何规模的应用程序，只是一个简单的学生项目。

const file = await DocumentPicker.getDocumentAsync({
        type: "image/*",
        copyToCacheDirectory: true,
    });

对于手机：

const uri = await fetch(file.uri);
const blob = await uri.blob();
const res = await new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
}).then((result) => {
   return result;
}); 
base64 = res as string;

对于 web，我只使用 file.uri，因为它是 b64。

但是，在这两种情况下，png 的 b64 都是不正确的，但 jpg 和 jpeg 是正确的。 这是一个已知问题，还是我只是错过了一些我需要为 alpha 值采取的特殊保护措施？

仅供参考运行 react-native 使用 expo

编辑，为 png 生成的 b64 示例：

https://controlc.com/f9073658 -b64 too long for SO

Answer 1

Base64 只是使用 64 个 ASCII 符号对字节进行编码。 我不确定 PNG 有什么问题，但如果您愿意，可以像这样使用 React Native 中的标准图像组件：

// include at least width and height!
<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: 'contain'
  }}
  source={{
    uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='
  }}
/>