Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/daattali/shinyscreenshot

📷 Capture screenshots of entire pages or parts of pages in Shiny apps
https://github.com/daattali/shinyscreenshot

r r-package rstats shiny shiny-r

Last synced: 5 days ago
JSON representation

📷 Capture screenshots of entire pages or parts of pages in Shiny apps

Awesome Lists containing this project

README 

        
shinyscreenshot




  📷 Capture screenshots of entire pages or parts of pages in Shiny apps

  



  Demo

  ·

  by Dean Attali

  ·

  10-min Tutorial






  

    R Build Status

  

  

    CRAN version

  

  

    

  




---






{shinyscreenshot} allows you to capture screenshots of entire pages or parts of pages in Shiny apps. Can be used to capture the *current* state of a Shiny app, including interactive widgets (such as plotly, timevis, maps, etc). The captured image is automatically downloaded as a PNG image, or it can be saved on the server.



**Need Shiny help? [I'm available for consulting](https://attalitech.com/).**


**If you find {shinyscreenshot} useful, please consider [supporting my work](https://github.com/sponsors/daattali)! ❤**





  

    

  




> This package is part of a larger ecosystem of packages with a shared vision: solving common Shiny issues and improving Shiny apps with minimal effort, minimal code changes, and clear documentation. Other packages for your Shiny apps:



| Package | Description | Demo |

|---|---|---|

| [shinyjs](https://deanattali.com/shinyjs/) | 💡 Easily improve the user experience of your Shiny apps in seconds | [🔗](https://deanattali.com/shinyjs/overview#demo) |

| [shinyalert](https://github.com/daattali/shinyalert) | 🗯️ Easily create pretty popup messages (modals) in Shiny | [🔗](https://daattali.com/shiny/shinyalert-demo/) |

| [timevis](https://github.com/daattali/timevis/) | 📅 Create interactive timeline visualizations in R | [🔗](https://daattali.com/shiny/timevis-demo/) |

| [shinycssloaders](https://github.com/daattali/shinycssloaders/) | ⌛ Add loading animations to a Shiny output while it's recalculating | [🔗](https://daattali.com/shiny/shinycssloaders-demo/) |

| [colourpicker](https://github.com/daattali/colourpicker/) | 🎨 A colour picker tool for Shiny and for selecting colours in plots | [🔗](https://daattali.com/shiny/colourInput/) |

| [shinybrowser](https://github.com/daattali/shinybrowser/) | 🌐 Find out information about a user's web browser in Shiny apps | [🔗](https://daattali.com/shiny/shinybrowser-demo/) |

| [shinydisconnect](https://github.com/daattali/shinydisconnect/) | 🔌 Show a nice message when a Shiny app disconnects or errors | [🔗](https://daattali.com/shiny/shinydisconnect-demo/) |

| [shinytip](https://github.com/daattali/shinytip/) | 💬 Simple flexible tooltips for Shiny apps | WIP |

| [shinymixpanel](https://github.com/daattali/shinymixpanel/) | 🔍 Track user interactions with Mixpanel in Shiny apps or R scripts | WIP |

| [shinyforms](https://github.com/daattali/shinyforms/) | 📝 Easily create questionnaire-type forms with Shiny | WIP |



# Table of contents



  - [How to use](#usage)

  - [Sponsors 🏆](#sponsors)

  - [Screenshot button](#screenshotbutton)

  - [Features](#features)

  - [Save to server example](#server)

  - [Installation](#install)

  - [Motivation](#motivation)

  - [Browser support and limitations](#limitations)

  - [Similar packages](#similar)



How to use



Using {shinyscreenshot} is as easy as it gets. When you want to take a screenshot, simply call `screenshot()` and a full-page screenshot will be taken and downloaded as a PNG image. **[Try it for yourself](https://daattali.com/shiny/shinyscreenshot-demo/) or [watch a short tutorial](https://www.youtube.com/watch?v=fsd81mnxtNs)!**



It's so simple that an example isn't needed, but here's one anyway:



    library(shiny)

    library(shinyscreenshot)



    ui <- fluidPage(

      textInput("text", "Enter some text", "test"),

      actionButton("go", "Take a screenshot")

    )



    server <- function(input, output) {

      observeEvent(input$go, {

        screenshot()

      })

    }

    

    shinyApp(ui, server)



Sponsors 🏆



- [Eric Nantz](https://r-podcast.org/)



[Become a sponsor for

{shinyscreenshot}\!](https://github.com/sponsors/daattali/sponsorships?tier_id=39856)



Screenshot button



The `screenshot()` function can be called any time inside the server portion of a Shiny app. A very common case is to take a screenshot after clicking a button. That case is so common that there's a function for it: `screenshotButton()`. It accepts all the same parameters as `screenshot()`, but instead of calling it in the server, you call it in the UI. 



`screenshotButton()` creates a button that, when clicked, will take a screenshot.



Features



- **Region:** By default, the entire page is captured. If you'd like to capture a specific part of the screen, you can use the `selector` parameter to specify a CSS selector. For example, if you have a plot with ID `myplot` then you can use `screenshot(selector="#myplot")`.



- **Scale:** The image file will have the same height and width as what is visible in the browser. Using `screenshot(scale=2)` will result in an image that's twice the height and width (and also a larger file size).



- **Timer:** Usually you want the screenshot to be taken immediately, but sometimes you may want to tell Shiny to take a screenshot in, for example, 3 seconds from now. That can be done using `screenshot(timer=3)`.



- **File name:** You can choose the name of the downloaded file using the `filename` parameter.



- **Saving on the server:** The image screenshot can also be stored on the server using the `server_dir` parameter. If the save is successful, `input$shinyscreenshot` will store the path of the image.



- **Module support:** As an alternative to the `selector` argument, you can also use the `id` argument. For example, instead of using `screenshot(selector="#myplot")`, you could use `screenshot(id="myplot")`. The advantage with using an ID directly is that the `id` parameter is module-aware, so even if you're taking a screenshot inside a Shiny module, you don't need to worry about namespacing.



Save to server example



The example below uses the `server_dir` parameter to save the screenshot to the server instead of downloading it to the user's browser. As proof that the file was saved on the server-side, a preview of the file is shown. You can change the `download = FALSE` parameter to `TRUE` if you want to both save to the server and also download the file.



```r

library(shiny)

library(shinyscreenshot)



ui <- fluidPage(

  plotly::plotlyOutput("plot"),

  screenshotButton(download = FALSE, server_dir = tempdir(), id = "plot"),

  h2("Preview of screenshot:"),

  imageOutput("preview", width = "50%", height = "200")

)



server <- function(input, output) {

  output$plot <- plotly::renderPlotly({

    plotly::plot_ly(mtcars, x = ~wt, y = ~mpg)

  })

  

  output$preview <- renderImage(deleteFile = TRUE, {

    req(input$shinyscreenshot) 

    list(src = input$shinyscreenshot, width = "100%", height = "100%")

  })

}



shinyApp(ui, server)

```



Installation



**For most users:** To install the stable CRAN version:



```r

install.packages("shinyscreenshot")

```



**For advanced users:** To install the latest development version from GitHub:



```r

install.packages("remotes")

remotes::install_github("daattali/shinyscreenshot")

```



Motivation



For years, I saw people asking online how can they take screenshots of the current state of a Shiny app. This question comes up especially with interactive outputs (plotly, timevis, maps, DT, etc). Some of these don't allow any way to save the current state as an image, and a few do have a "Save as image" option, but they only save the base/initial state of the output, rather than the current state after receiving user interaction.



After seeing many people asking about this, one day my R-friend Eric Nantz [asked about it as well](https://community.rstudio.com/t/taking-screenshots-within-a-shiny-app/6892), which gave me the motivation to come up with a solution.



Browser support and limitations



The screenshots are powered by the 'html2canvas' JavaScript library. They do not always produce perfect screenshots, please refer to 'html2canvas' for more information about the limitations. Leaflet maps often have trouble with screenshots, and unfortunately this is a known issue that cannot be fixed.



The JavaScript libraries used in this package may not be supported by all browsers. {shinyscreenshot} should work on Chrome, Firefox, Edge, Chrome on Android, Safari on iPhone (and probably more that I haven't tested). It does not work in Internet Explorer.



Similar packages



As mentioned above, the libraries used by {shinyscreenshot} do have limitations and may not always work. There are two other packages that came out recently that also provide screenshot functionality which you may try and compare: [{snapper}](https://github.com/yonicd/snapper) by Jonathan Sidi and [{capture}](https://github.com/dreamRs/capture) by dreamRs.



RStudio's [{webshot}](https://github.com/wch/webshot) package is also similar, but serves a very different purpose. {webshot} is used to take screenshots of any website (including Shiny apps), but you cannot interact with the page in order to take a screenshot at a specific time.



Credits



Logo design by [Alfredo Hernández](https://aldomann.com/).