-
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
118 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,124 @@ | ||
| # shinyscreenshot | ||
| <p align="center"> | ||
| <h3 align="center">shinyscreenshot</h3> | ||
|
|
||
| <a href="https://travis-ci.org/daattali/shinyscreenshot"> | ||
| <img src="https://travis-ci.org/daattali/shinyscreenshot.svg?branch=master" alt="Build Status" /> | ||
| </a> <a href="https://cran.r-project.org/package=shinyscreenshot"> | ||
| <img src="https://www.r-pkg.org/badges/version/shinyscreenshot" alt="CRAN version" /> | ||
| <h4 align="center"> | ||
| Capture screenshots of entire pages or parts of pages in Shiny apps | ||
| <br><br> | ||
| <a href="https://daattali.com/shiny/shinyscreenshot-demo/">Demo</a> | ||
| · | ||
| by <a href="https://deanattali.com">Dean Attali</a> | ||
| </h4> | ||
|
|
||
| <p align="center"> | ||
| <a href="https://travis-ci.org/daattali/shinyscreenshot"> | ||
| <img src="https://travis-ci.org/daattali/shinyscreenshot.svg?branch=master" alt="Build Status" /> | ||
| </a> | ||
| <a href="https://cran.r-project.org/package=shinyscreenshot"> | ||
| <img src="https://www.r-pkg.org/badges/version/shinyscreenshot" alt="CRAN version" /> | ||
| </a> | ||
| </p> | ||
|
|
||
| </p> | ||
|
|
||
| --- | ||
|
|
||
| {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. | ||
|
|
||
| **Need Shiny help? [I’m available for | ||
| consulting](https://attalitech.com/).**<br/> **If you find {shinyscreenshot} | ||
| useful, please consider [supporting my | ||
| work](https://github.com/sponsors/daattali) to unlock rewards\! ❤** | ||
|
|
||
| <p align="center"> | ||
|
|
||
| <a style="display: inline-block;" href="https://github.com/sponsors/daattali"> | ||
| <img height="35" src="https://i.imgur.com/034B8vq.png" /> </a> | ||
|
|
||
| <a style="display: inline-block;" href="https://paypal.me/daattali"> | ||
| <img height="35" src="https://camo.githubusercontent.com/0e9e5cac101f7093336b4589c380ab5dcfdcbab0/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f74776f6c66736f6e2f70617970616c2d6769746875622d627574746f6e40312e302e302f646973742f627574746f6e2e737667" /> | ||
| </a> | ||
|
|
||
| Not yet released. WIP for 2 years, will be released VERY SOON (functionality is finished, just need to finish the documentation.) | ||
| </p> | ||
|
|
||
| # Table of contents | ||
|
|
||
| - [How to use](#usage) | ||
| - [Features](#features) | ||
| - [Screenshot button](#screenshotbutton) | ||
| - [Installation](#install) | ||
| - [Motivation](#motivation}) | ||
| - [Browser support and limitations](#limitations) | ||
| - [Similar packages](#similar) | ||
| - [Sponsors 🏆](#sponsors) | ||
|
|
||
| ## How to use {#usage} | ||
|
|
||
| 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/) | ||
|
|
||
| It's so simple that an example isn't needed, but here's one anyway: | ||
|
|
||
| library(shiny) | ||
| library(shinyscreensot) | ||
|
|
||
| ui <- fluidPage( | ||
| textInput("text", "Enter some text", "test"), | ||
| actionButton("go", "Take a screenshot") | ||
| ) | ||
|
|
||
| server <- function(input, output) { | ||
| observeEvent(input$go, { | ||
| screenshot() | ||
| }) | ||
| } | ||
|
|
||
| shinyApp(ui, server) | ||
|
|
||
| ## Features {#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. | ||
|
|
||
| - **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. | ||
|
|
||
| ## Screenshot button {#screenshotbutton} | ||
|
|
||
| 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. It creates a button that, when clicked, will take a screenshot. | ||
|
|
||
| ## Installation {#install} | ||
|
|
||
| To install the stable CRAN version: | ||
|
|
||
| install.packages("shinyscreenshot") | ||
|
|
||
| To install the latest development version from GitHub: | ||
|
|
||
| install.packages("remotes") | ||
| remotes::install_github("daattali/shinyscreenshot") | ||
|
|
||
| ## Motivation {#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 {#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. | ||
|
|
||
| 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. It does not work in Internet Explorer. | ||
|
|
||
| ## Similar packages {#similar} | ||
|
|
||
| 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 Cidi and [capture](https://github.com/dreamRs/capture) by dreamRs. | ||
|
|
||
| Does not work in IE | ||
| ## Sponsors 🏆 {#sponsors} | ||
|
|
||
| Inspired by https://community.rstudio.com/t/taking-screenshots-within-a-shiny-app/6892 (this is the second package that I make for the general public just because Eric asked a question that interested me and included a good resource) | ||
| > There are no sponsors yet | ||
| timevis renders nicely with shinyscreenshot but not with the other 2 new packages, html2canvas doesnt render well parts of pages | ||
| [Become the first sponsor for | ||
| {shinyscreenshot}\!](https://github.com/sponsors/daattali/sponsorships?tier_id=39856) |