Export image on web

app/controls/Toolbar/file_manager.gd

@@ -10,15 +10,25 @@ var jsFileLoadCallback = JavaScriptBridge.create_callback(_on_js_file_load)
 
 enum MenuOptions { OPEN, SAVE, EXPORT }
 
+const TEMP_RES_SAVE_FILE = "temp_res_save_dhova5k2f7igh.res"
+const TEMP_RES_SAVE_FILE_PATH = "user://" + TEMP_RES_SAVE_FILE
+
+const TEMP_IMAGE_SAVE_FILE = "temp_image_save_dhova5k2f7igh.png"
+const TEMP_IMAGE_SAVE_FILE_PATH = "user://" + TEMP_IMAGE_SAVE_FILE
+
+const TEMP_LOAD_FILE = "temp_load_dhova5k2f7igh.res"
+const TEMP_LOAD_FILE_PATH = "user://" + TEMP_LOAD_FILE
+
 func _ready():
     get_popup().id_pressed.connect(_on_id_pressed)
-    if OS.get_name() == "Web":
-        var js_window = JavaScriptBridge.get_interface("window")
-        js_window.setupOpenFile(jsFileLoadCallback)
-    else:
-        open_save_dialog.file_selected.connect(_on_open_save_file_selected)
-        export_dialog.file_selected.connect(_on_export_file_selected)
-        get_viewport().files_dropped.connect(_on_files_dropped)
+    match OS.get_name():
+        "Web":
+            var js_window = JavaScriptBridge.get_interface("window")
+            js_window.setupOpenFile(jsFileLoadCallback)
+        _:
+            open_save_dialog.file_selected.connect(_on_open_save_file_selected)
+            export_dialog.file_selected.connect(_on_export_file_selected)
+            get_viewport().files_dropped.connect(_on_files_dropped)
 
 func _on_id_pressed(id: int):
     if draw_canvas:
@@ -34,12 +44,21 @@ func _on_id_pressed(id: int):
             MenuOptions.SAVE:
                 match OS.get_name():
                     "Web":
-                        save_file_web()
+                        var canvas_data := draw_canvas.create_canvas_data()
+                        var result := ResourceSaver.save(canvas_data, TEMP_RES_SAVE_FILE_PATH, ResourceSaver.FLAG_COMPRESS)
+                        if result == OK:
+                            save_file_web(TEMP_RES_SAVE_FILE_PATH)
                     _:
                         open_save_dialog.file_mode = FileDialog.FILE_MODE_SAVE_FILE
                         open_save_dialog.visible = true
             MenuOptions.EXPORT:
-                export_dialog.visible = true
+                match OS.get_name():
+                    "Web":
+                        var result = await _on_export_file_selected(TEMP_IMAGE_SAVE_FILE_PATH)
+                        if result == OK:
+                            save_file_web(TEMP_IMAGE_SAVE_FILE_PATH, "image/png")
+                    _:
+                        export_dialog.visible = true
 
 func _on_open_save_file_selected(path: String):
     if draw_canvas:
@@ -52,33 +71,20 @@ func _on_open_save_file_selected(path: String):
                 var canvas_data: CanvasData = draw_canvas.create_canvas_data()
                 ResourceSaver.save(canvas_data, path, ResourceSaver.FLAG_COMPRESS)
 
-func _on_export_file_selected(path: String):
+func _on_export_file_selected(path: String) -> int:
     subviewport.update_viewport()
-    subviewport.save_canvas(path)
+    return await subviewport.save_canvas(path)
 
 func _on_files_dropped(files: PackedStringArray):
     _on_open_save_file_selected(files[0])
 
-const TEMP_SAVE_FILE = "temp_save_dhova5k2f7igh.res"
-const TEMP_SAVE_FILE_PATH = "user://" + TEMP_SAVE_FILE
-
-func save_file_web():
-    # Check if temp file exists. If it does, delete it. ALERT: Don't know if this is needed.
-    # if FileAccess.file_exists(TEMP_SAVE_FILE_PATH):
-    #     var dir = DirAccess.open("user://")
-    #     dir.remove(TEMP_SAVE_FILE)
-    var canvas_data := draw_canvas.create_canvas_data()
-    var result := ResourceSaver.save(canvas_data, TEMP_SAVE_FILE_PATH, ResourceSaver.FLAG_COMPRESS)
-    if result == OK:
-        var buffer := FileAccess.get_file_as_bytes(TEMP_SAVE_FILE_PATH)
+func save_file_web(path: String, type = "text/plain"):
+        var buffer := FileAccess.get_file_as_bytes(path)
         if buffer.size() > 0:
             var uid := ResourceUID.id_to_text(ResourceUID.create_id()).trim_prefix("uid://")
-            var file_name := uid + ".res"
+            var file_name := uid + "." + path.get_extension()
             var js_window := JavaScriptBridge.get_interface("window")
-            js_window.downloadFile(Marshalls.raw_to_base64(buffer), file_name)
-
-const TEMP_LOAD_FILE = "temp_load_dhova5k2f7igh.res"
-const TEMP_LOAD_FILE_PATH = "user://" + TEMP_LOAD_FILE
+            js_window.downloadFile(Marshalls.raw_to_base64(buffer), file_name, type)
 
 func _on_js_file_load(_args):
     var buffer: PackedByteArray = JavaScriptBridge.eval("getFileBuffer();", true);

app/full-size.html

@@ -159,8 +159,8 @@
                     return bytes.buffer;
                 }
 
-                window.downloadFile = (data, filename) => {
-                    download(base64ToArrayBuffer(data), filename, 'text/plain');
+                window.downloadFile = (data, filename, type) => {
+                    download(base64ToArrayBuffer(data), filename, type);
                 };
             })();
         </script>

app/scripts/canvas_viewport.gd

@@ -10,16 +10,17 @@ func update_viewport():
     background.current_canvas = canvas_data
     background.queue_redraw()
 
-func save_canvas(path: String):
+func save_canvas(path: String) -> int:
     await background.finished_drawing
     await RenderingServer.frame_post_draw
     var texture = get_texture()
     var image = texture.get_image()
     var extension = path.split(".")[-1].to_lower()
     match extension:
         "png":
-            image.save_png(path)
+            return image.save_png(path)
         "jpg", "jpeg":
-            image.save_jpg(path)
+            return image.save_jpg(path)
         "webp":
-            image.save_webp(path)
+            return image.save_webp(path)
+    return ERR_FILE_UNRECOGNIZED