Add screenshot support for eframe web

crates/eframe/src/native/wgpu_integration.rs

@@ -185,6 +185,7 @@ impl<'app> WgpuWinitApp<'app> {
 
         #[allow(unsafe_code, unused_mut, unused_unsafe)]
         let mut painter = egui_wgpu::winit::Painter::new(
+            egui_ctx.clone(),
             self.native_options.wgpu_options.clone(),
             self.native_options.multisampling.max(1) as _,
             egui_wgpu::depth_format_from_bits(
@@ -593,6 +594,8 @@ impl<'app> WgpuWinitRunning<'app> {
                 .map(|(id, viewport)| (*id, viewport.info.clone()))
                 .collect();
 
+            painter.handle_screenshots(&mut raw_input.events);
+
             (viewport_ui_cb, raw_input)
         };
 
@@ -652,37 +655,14 @@ impl<'app> WgpuWinitRunning<'app> {
                 true
             }
         });
-        let screenshot_requested = !screenshot_commands.is_empty();
-        let (vsync_secs, screenshot) = painter.paint_and_update_textures(
+        let vsync_secs = painter.paint_and_update_textures(
             viewport_id,
             pixels_per_point,
             app.clear_color(&egui_ctx.style().visuals),
             &clipped_primitives,
             &textures_delta,
-            screenshot_requested,
+            screenshot_commands,
         );
-        match (screenshot_requested, screenshot) {
-            (false, None) => {}
-            (true, Some(screenshot)) => {
-                let screenshot = Arc::new(screenshot);
-                for user_data in screenshot_commands {
-                    egui_winit
-                        .egui_input_mut()
-                        .events
-                        .push(egui::Event::Screenshot {
-                            viewport_id,
-                            user_data,
-                            image: screenshot.clone(),
-                        });
-                }
-            }
-            (true, None) => {
-                log::error!("Bug in egui_wgpu: screenshot requested, but no screenshot was taken");
-            }
-            (false, Some(_)) => {
-                log::warn!("Bug in egui_wgpu: Got screenshot without requesting it");
-            }
-        }
 
         for action in viewport.actions_requested.drain() {
             match action {
@@ -1024,7 +1004,7 @@ fn render_immediate_viewport(
         [0.0, 0.0, 0.0, 0.0],
         &clipped_primitives,
         &textures_delta,
-        false,
+        vec![],
     );
 
     egui_winit.handle_platform_output(window, platform_output);

crates/eframe/src/web/app_runner.rs

@@ -1,4 +1,5 @@
-use egui::TexturesDelta;
+use egui::{TexturesDelta, UserData, ViewportCommand};
+use std::mem;
 
 use crate::{epi, App};
 
@@ -16,6 +17,9 @@ pub struct AppRunner {
     last_save_time: f64,
     pub(crate) text_agent: TextAgent,
 
+    // If not empty, the painter should capture the next frame
+    screenshot_commands: Vec<UserData>,
+
     // Output for the last run:
     textures_delta: TexturesDelta,
     clipped_primitives: Option<Vec<egui::ClippedPrimitive>>,
@@ -36,7 +40,8 @@ impl AppRunner {
         app_creator: epi::AppCreator<'static>,
         text_agent: TextAgent,
     ) -> Result<Self, String> {
-        let painter = super::ActiveWebPainter::new(canvas, &web_options).await?;
+        let egui_ctx = egui::Context::default();
+        let painter = super::ActiveWebPainter::new(egui_ctx.clone(), canvas, &web_options).await?;
 
         let info = epi::IntegrationInfo {
             web_info: epi::WebInfo {
@@ -47,7 +52,6 @@ impl AppRunner {
         };
         let storage = LocalStorage::default();
 
-        let egui_ctx = egui::Context::default();
         egui_ctx.set_os(egui::os::OperatingSystem::from_user_agent(
             &super::user_agent().unwrap_or_default(),
         ));
@@ -110,6 +114,7 @@ impl AppRunner {
             needs_repaint,
             last_save_time: now_sec(),
             text_agent,
+            screenshot_commands: vec![],
             textures_delta: Default::default(),
             clipped_primitives: None,
         };
@@ -205,6 +210,8 @@ impl AppRunner {
     pub fn logic(&mut self) {
         // We sometimes miss blur/focus events due to the text agent, so let's just poll each frame:
         self.update_focus();
+        // We might have received a screenshot
+        self.painter.handle_screenshots(&mut self.input.raw.events);
 
         let canvas_size = super::canvas_size_in_points(self.canvas(), self.egui_ctx());
         let mut raw_input = self.input.new_frame(canvas_size);
@@ -225,12 +232,19 @@ impl AppRunner {
         if viewport_output.len() > 1 {
             log::warn!("Multiple viewports not yet supported on the web");
         }
-        for viewport_output in viewport_output.values() {
-            for command in &viewport_output.commands {
-                // TODO(emilk): handle some of the commands
-                log::warn!(
-                    "Unhandled egui viewport command: {command:?} - not implemented in web backend"
-                );
+        for (_viewport_id, viewport_output) in viewport_output {
+            for command in viewport_output.commands {
+                match command {
+                    ViewportCommand::Screenshot(user_data) => {
+                        self.screenshot_commands.push(user_data);
+                    }
+                    _ => {
+                        // TODO(emilk): handle some of the commands
+                        log::warn!(
+                            "Unhandled egui viewport command: {command:?} - not implemented in web backend"
+                        );
+                    }
+                }
             }
         }
 
@@ -250,6 +264,7 @@ impl AppRunner {
                 &clipped_primitives,
                 self.egui_ctx.pixels_per_point(),
                 &textures_delta,
+                mem::take(&mut self.screenshot_commands),
             ) {
                 log::error!("Failed to paint: {}", super::string_from_js_value(&err));
             }

crates/eframe/src/web/web_painter.rs

@@ -1,3 +1,4 @@
+use egui::{Event, UserData};
 use wasm_bindgen::JsValue;
 
 /// Renderer for a browser canvas.
@@ -16,14 +17,19 @@ pub(crate) trait WebPainter {
     fn max_texture_side(&self) -> usize;
 
     /// Update all internal textures and paint gui.
+    /// When `capture` isn't empty, the rendered screen should be captured.
+    /// Once the screenshot is ready, the screenshot should be returned via [`Self::handle_screenshots`].
     fn paint_and_update_textures(
         &mut self,
         clear_color: [f32; 4],
         clipped_primitives: &[egui::ClippedPrimitive],
         pixels_per_point: f32,
         textures_delta: &egui::TexturesDelta,
+        capture: Vec<UserData>,
     ) -> Result<(), JsValue>;
 
+    fn handle_screenshots(&mut self, events: &mut Vec<Event>);
+
     /// Destroy all resources.
     fn destroy(&mut self);
 }

crates/eframe/src/web/web_painter_glow.rs

@@ -1,24 +1,30 @@
+use egui::{Event, UserData, ViewportId};
+use egui_glow::glow;
+use std::sync::Arc;
 use wasm_bindgen::JsCast;
 use wasm_bindgen::JsValue;
 use web_sys::HtmlCanvasElement;
 
-use egui_glow::glow;
-
 use crate::{WebGlContextOption, WebOptions};
 
 use super::web_painter::WebPainter;
 
 pub(crate) struct WebPainterGlow {
     canvas: HtmlCanvasElement,
     painter: egui_glow::Painter,
+    screenshots: Vec<(egui::ColorImage, Vec<UserData>)>,
 }
 
 impl WebPainterGlow {
     pub fn gl(&self) -> &std::sync::Arc<glow::Context> {
         self.painter.gl()
     }
 
-    pub async fn new(canvas: HtmlCanvasElement, options: &WebOptions) -> Result<Self, String> {
+    pub async fn new(
+        _ctx: egui::Context,
+        canvas: HtmlCanvasElement,
+        options: &WebOptions,
+    ) -> Result<Self, String> {
         let (gl, shader_prefix) =
             init_glow_context_from_canvas(&canvas, options.webgl_context_option)?;
         #[allow(clippy::arc_with_non_send_sync)]
@@ -27,7 +33,11 @@ impl WebPainterGlow {
         let painter = egui_glow::Painter::new(gl, shader_prefix, None, options.dithering)
             .map_err(|err| format!("Error starting glow painter: {err}"))?;
 
-        Ok(Self { canvas, painter })
+        Ok(Self {
+            canvas,
+            painter,
+            screenshots: Vec::new(),
+        })
     }
 }
 
@@ -46,6 +56,7 @@ impl WebPainter for WebPainterGlow {
         clipped_primitives: &[egui::ClippedPrimitive],
         pixels_per_point: f32,
         textures_delta: &egui::TexturesDelta,
+        capture: Vec<UserData>,
     ) -> Result<(), JsValue> {
         let canvas_dimension = [self.canvas.width(), self.canvas.height()];
 
@@ -57,6 +68,11 @@ impl WebPainter for WebPainterGlow {
         self.painter
             .paint_primitives(canvas_dimension, pixels_per_point, clipped_primitives);
 
+        if !capture.is_empty() {
+            let image = self.painter.read_screen_rgba(canvas_dimension);
+            self.screenshots.push((image, capture));
+        }
+
         for &id in &textures_delta.free {
             self.painter.free_texture(id);
         }
@@ -67,6 +83,19 @@ impl WebPainter for WebPainterGlow {
     fn destroy(&mut self) {
         self.painter.destroy();
     }
+
+    fn handle_screenshots(&mut self, events: &mut Vec<Event>) {
+        for (image, data) in self.screenshots.drain(..) {
+            let image = Arc::new(image);
+            for data in data {
+                events.push(Event::Screenshot {
+                    viewport_id: ViewportId::default(),
+                    image: image.clone(),
+                    user_data: data,
+                });
+            }
+        }
+    }
 }
 
 /// Returns glow context and shader prefix.