Tweak canvas export logic

nerfstudio-project · Jul 1, 2023 · 65d4bf4 · 65d4bf4
1 parent 0d81c5e
commit 65d4bf4
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 48 deletions.
diff --git a/viser/client/build/assets/index-525d2a6a.js → viser/client/build/assets/index-828ec1a0.js b/viser/client/build/assets/index-525d2a6a.js → viser/client/build/assets/index-828ec1a0.js
diff --git a/viser/client/build/index.html b/viser/client/build/index.html
@@ -16,7 +16,7 @@
     -->
     <link rel="manifest" href="/manifest.json" />
     <title>Viser</title>
-    <script type="module" crossorigin src="/assets/index-525d2a6a.js"></script>
+    <script type="module" crossorigin src="/assets/index-828ec1a0.js"></script>
     <link rel="stylesheet" href="/assets/index-a02dfc21.css">
   </head>
   <body>

diff --git a/viser/client/src/ControlPanel/Server.tsx b/viser/client/src/ControlPanel/Server.tsx
@@ -36,57 +36,57 @@ export default function ServerControls() {
         />
         <Button
           onClick={async () => {
-            viewer.canvasRef.current?.toBlob(async (blob) => {
-              if (blob === null) {
-                console.error("Render failed!");
-                return;
-              }
-
-              const supportsFileSystemAccess =
-                'showSaveFilePicker' in window &&
-                (() => {
-                  try {
-                    return window.self === window.top;
-                  } catch {
-                    return false;
-                  }
-                })();
-              // If the File System Access API is supported…
-              if (supportsFileSystemAccess) {
-                let handle = null;
+            const supportsFileSystemAccess =
+              "showSaveFilePicker" in window &&
+              (() => {
                 try {
-                  handle = await window.showSaveFilePicker({
-                    suggestedName: "render.png",
-                    types: [
-                      {
-                        accept: { "image/png": [".png"] },
-                      },
-                    ],
-                  });
-                } catch (e) {
-                  console.log(e);
-                }
-                if (handle) {
-                  const writableStream = await handle.createWritable();
-                  await writableStream.write(blob);
-                  await writableStream.close();
+                  return window.self === window.top;
+                } catch {
+                  return false;
                 }
-              }
+              })();
 
-              const href = URL.createObjectURL(blob);
+            if (supportsFileSystemAccess) {
+              // File System Access API is supported. (eg Chrome)
+              const fileHandlePromise = window.showSaveFilePicker({
+                suggestedName: "render.png",
+                types: [
+                  {
+                    accept: { "image/png": [".png"] },
+                  },
+                ],
+              });
+              viewer.canvasRef.current?.toBlob(async (blob) => {
+                if (blob === null) {
+                  console.error("Export failed");
+                  return;
+                }
 
-              // create "a" HTML element with href to file
-              const link = document.createElement('a');
-              link.href = href;
+                const handle = await fileHandlePromise;
+                const writableStream = await handle.createWritable();
+                await writableStream.write(blob);
+                await writableStream.close();
+              });
+            } else {
+              // File System Access API is not supported. (eg Firefox)
+              viewer.canvasRef.current?.toBlob((blob) => {
+                if (blob === null) {
+                  console.error("Export failed");
+                  return;
+                }
+                const href = URL.createObjectURL(blob);
 
-              const filename = 'render.png';
-              link.download = filename;
-              document.body.appendChild(link);
-              link.click();
-              // clean up "a" element & remove ObjectURL
-              document.body.removeChild(link);
-              URL.revokeObjectURL(href);
-            });
+                // Download a file by creating a link and then clicking it.
+                const link = document.createElement("a");
+                link.href = href;
+                const filename = "render.png";
+                link.download = filename;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(href);
+              });
+            }
           }}
           fullWidth
           leftIcon={<IconPhoto size="1rem" />}