From a1117cd4ee0ae28ce9a965447dd0ec8d0c9ee5c0 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Mon, 15 Jul 2024 20:47:49 +0800
Subject: [PATCH] save blob to indexeddb instead of base64 image string

---
 app/store/sd.ts    |  9 +++++++--
 app/utils/file.tsx | 13 +++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/store/sd.ts b/app/store/sd.ts
index 70d44cac3..842763f9f 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -3,7 +3,7 @@ import { showToast } from "@/app/components/ui-lib";
 import { getHeaders } from "@/app/client/api";
 import { createPersistStore } from "@/app/utils/store";
 import { nanoid } from "nanoid";
-import { saveFileData } from "@/app/utils/file";
+import { saveFileData, base64Image2Blob } from "@/app/utils/file";
 
 export const useSdStore = createPersistStore<
   {
@@ -72,7 +72,12 @@ export const useSdStore = createPersistStore<
               this.updateDraw({
                 ...data,
                 status: "success",
-                img_data: saveFileData(db, data.id, resData.image),
+                // save blob to indexeddb instead of base64 image string
+                img_data: saveFileData(
+                  db,
+                  data.id,
+                  base64Image2Blob(resData.image, "image/png"),
+                ),
               });
             } else {
               this.updateDraw({
diff --git a/app/utils/file.tsx b/app/utils/file.tsx
index 63039359f..52a258edf 100644
--- a/app/utils/file.tsx
+++ b/app/utils/file.tsx
@@ -32,6 +32,16 @@ export function useFileDB() {
   return useIndexedDB(StoreKey.File);
 }
 
+export function base64Image2Blob(base64Data: string, contentType: string) {
+  const byteCharacters = atob(base64Data);
+  const byteNumbers = new Array(byteCharacters.length);
+  for (let i = 0; i < byteCharacters.length; i++) {
+    byteNumbers[i] = byteCharacters.charCodeAt(i);
+  }
+  const byteArray = new Uint8Array(byteNumbers);
+  return new Blob([byteArray], { type: contentType });
+}
+
 export function saveFileData(db, fileId, data) {
   // save file content and return url start with `indexeddb://`
   db.add({ id: fileId, data });
@@ -40,6 +50,9 @@ export function saveFileData(db, fileId, data) {
 
 export async function getFileData(db, fileId, contentType = "image/png") {
   const { data } = await db.getByID(fileId);
+  if (typeof data == "object") {
+    return URL.createObjectURL(data);
+  }
   return `data:${contentType};base64,${data}`;
 }