将电容器相机结果转换为 Blob

Question

我需要将 Capacitor Camera 插件的结果转换为 Blob 以上传到 Firebase Storage。

我可以上传 Base64 字符串，但我已经从浏览按钮的 FileList 上传了 Blob/文件，所以我不想改变它的设计。

相机插件以 Base64 编码字符串的形式提供图像数据，表示 PNG 图像。

我尝试了以下方法：

const { Camera } = Plugins;

const image = await Camera.getPhoto({
  quality: 90,
  allowEditing: true,
  resultType: CameraResultType.Base64
});

const rawData = atob(image.base64String);
const blob = new Blob([rawData], { type: 'image/png' });

但 blob 最终不是一个有效的图像。

任何帮助表示赞赏。

使用：@angular/core: 9.1.4, @ionic/angular: 5.1.0, @capacitor/core: 2.1.1

Answer 1

您需要获取由提供的字节字符atob并将其转换为字节数组，然后可以使用该数组生成一个Blob：

const rawData = atob(image.base64String);
const bytes = new Array(rawData.length);
for (var x = 0; x < rawData.length; x++) {
    bytes[x] = rawData.charCodeAt(x);
}
const arr = new Uint8Array(bytes);
const blob = new Blob([arr], {type: 'image/png'});

Answer 2

我用这个：

import {decode} from "base64-arraybuffer";

const cameraPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Base64,
}

const blob = new Blob([new Uint8Array(decode(cameraPhoto.base64String))], {
    type: `image/${cameraPhoto.format}`,
});

如果需要将其转换为文件：

const file = new File([blob], "Name", {
    lastModified: moment().unix(),
    type: blob.type,
});