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

Question

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

我可以上传 Base64 字符串，但我已经从浏览按钮的文件列表上传 Blobs/Files，所以我不想更改它的设计。

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

我试过以下方法：

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,
});

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

Convert capacitor Camera result to Blob

ionic-framework

angular

capacitor