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

Posted 2023-02-19

【中文标题】将电容器相机结果转换为 Blob

【英文标题】：Convert capacitor Camera result to Blob

【发布时间】：2020-09-20 11:36:57

【问题描述】：

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

我可以上传 Base64 字符串，但我已经从 Browse 按钮​​的 FileList 上传 Blob/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

【问题讨论】：

你可以上传一个base64str到firebase...不需要转换，你也可以使用fetch直接从文件系统读取到一个blob。

是的，我提到了这一点。我已经从我的代码中的“浏览”功能上传图像二进制文件。我不想更改存储图像的格式。

【参考方案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');

【参考方案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,
);

【讨论】：

干净整洁。谢谢。