Add screenshot support for eframe web (#5438)

This implements web support for taking screenshots in an eframe app (and
adds a nice demo).
It also updates the native screenshot implementation to work with the
wgpu gl backend.

The wgpu implementation is quite different than the native one because
we can't block to wait for the screenshot result, so instead I use a
channel to pass the result to a future frame asynchronously.

* Closes <#5425>
* [x] I have followed the instructions in the PR template


https://github.com/user-attachments/assets/67cad40b-0384-431d-96a3-075cc3cb98fb

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.