在 React-native expo 中将 blob 转换为图像

Converting a blob to an image in React-native expo

提问人:davyioner 提问时间:11/14/2023 更新时间:11/14/2023 访问量:24

问:

我有一个 react-native expo 应用程序,正在尝试从我的存储桶中检索图像、解密它们并展示它们。我有加密的上传、检索和解密工作。现在我想展示这些图像。

我有存储在存储桶中的图像,这些图像是加密的。我的加密和解密如下所示:


export function encryptBlob(blob: Blob, masterKey: string): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function (event: any) {
      const arrayBuffer = event.target?.result;
      if (!arrayBuffer) {
        reject("Failed to read binary data from blob.");
        return;
      }

      const uint8Array = new Uint8Array(arrayBuffer);
      let binaryData = "";
      uint8Array.forEach((byte) => {
        binaryData += String.fromCharCode(byte);
      });

      const strengthenedPassword = getStrengthenedPassword(masterKey);
      const cipherText = CryptoJS.AES.encrypt(binaryData, strengthenedPassword, {
        mode: CryptoJS.mode.CBC,
      }).toString();

      resolve(cipherText);
    };
    reader.onerror = function (error) {
      reject("An error occurred while reading the blob: " + error);
    };
    reader.readAsArrayBuffer(blob);
  });
}

export function decryptBlob(cipherText: string, contentType : string, masterKey: string): Promise<Blob> {
  return new Promise((resolve, reject) => {
    try {
      const strengthenedPassword = getStrengthenedPassword(masterKey);
      const decryptedBinary = CryptoJS.AES.decrypt(cipherText, strengthenedPassword).toString(CryptoJS.enc.Latin1);

      const byteNumbers = Array.from(decryptedBinary, (char : any) => char.charCodeAt(0));
      const byteArray = new Uint8Array(byteNumbers);
      const blob = new Blob([byteArray], { type: contentType });

      resolve(blob);
    } catch (error) {
      reject("An error occurred during decryption: " + error);
    }
  });
}

从存储桶中获取文件后,我运行如下函数:

const decryptedBlob = await decryptBlob(response.content, response.contentType, encryptionKey);

当我打印此文件时,它看起来像这样:

{"_data":{"blobId":"0a059363-64e4-4b59-9253-be52c5146cda","offset":0,"size":16993323,"type":"application/octet-stream; charset=UTF-8","__collector":{}}}

我可以使用 new Blob([decryptedBlob], { type: “image/jpeg” });然后文件如下所示:

 {"_data":{"blobId":"00d18f7c-e3ab-43ff-87eb-471397ad0046","offset":0,"size":16993323,"type":"image/jpeg","__collector":{}}}

在此之后,我卡住了如何显示此图像。我可以直接调用它吗?我必须将其写入文件系统吗?希望有人对此有任何经验。

TypeScript React-Native Expo Blob

评论


答: 暂无答案