capture: added inputId argument to allow retrieving image as base64 s…

…tring server-side

NEWS.md

@@ -1,6 +1,8 @@
 # capture 0.1.1
 
 * `capture()` / `capture_pdf()`: added `scale` argument, to be applied to image dimensions.
+* `capture()`: added `inputId` argument to allow retrieving image as base64 string server-side.
+
 
 # capture 0.1.0
 

R/capture.R

@@ -4,10 +4,11 @@
 #' @description Add a button to take a screenshot of a specified element and download a PNG file.
 #'
 #' @param selector A CSS selector, for example `body` to target the whole page or `#<ID>` to target a specific output.
-#' @param filename Name of the file (without extension) that will be created.
+#' @param filename Name of the file (without extension) that will be created. If `NULL` no file is downloaded client side.
 #' @param ... Arguments passed to HTML button.
 #' @param format Format of output between: `"png"` or `"jpeg"`.
-#' @param scale Scale factor applied to image's dimension.
+#' @param scale Scale factor applied to image's dimension. Can be used to get a higher resolution image.
+#' @param inputId An `inputId` to retrieve image as base64 in an `input` slot server-side.
 #' @param options Options (as a list) passed to [domtoimage](https://github.com/tsayen/dom-to-image)
 #'  method, for example you can use `bgcolor` to set background color.
 #'
@@ -21,23 +22,25 @@
 #' @importFrom jsonlite toJSON
 #'
 #' @example examples/default.R
-capture <- function(selector, filename, ..., format = c("png", "jpeg"), scale = NULL, options = list()) {
+capture <- function(selector,
+                    filename,
+                    ..., 
+                    format = c("png", "jpeg"),
+                    scale = NULL, 
+                    inputId = NULL,
+                    options = NULL) {
   format <- match.arg(format)
   ext <- tools::file_ext(filename)
   if (identical(ext, ""))
     filename <- paste0(filename, ".", format)
-  if (length(options) < 1)  {
-    options <- "{}"
-  } else {
-    options <- toJSON(x = options, auto_unbox = TRUE)
-  }
   tagList(
     tags$button(
       class = "btn btn-default btn-capture btn-capture-screenshot",
       `data-selector` = selector,
       `data-filename` = filename,
-      `data-options` = options,
-      `data-scale` = if (!is.null(scale)) scale,
+      `data-options` = toJSON(x = options, auto_unbox = TRUE),
+      `data-scale` = scale,
+      `data-inputId` = inputId,
       ...
     ),
     html_dependency_filesaver(),

examples/default.R

@@ -44,12 +44,35 @@ ui <- fluidPage(
         icon("camera"), "Take screenshot of results (bigger scale)",
         scale = 3,
         options = list(bgcolor = "#FFF")
-      )
+      ),
+      capture(
+        selector = "#result-block",
+        filename = NULL, # no download client side
+        icon("camera"), "Take screenshot of results (retrieve server side)",
+        inputId = "screenshot",
+        options = list(bgcolor = "#FFF")
+      ),
+      uiOutput("out")
     )
   )
 )
 
 server <- function(input, output, session) {
+
+  output$out <- renderUI({
+    # # Here we display image back in interface, 
+    # # but you can also write image on disk
+    # write_png <- function(x, filename) {
+    #   x <- sub(".*,", "", x)
+    #   x <- base64enc::base64decode(x)
+    #   png::writePNG(png::readPNG(x), filename)
+    # }
+    # write_png(input$screenshot, "myimage.png")
+
+    tags$img(src = input$screenshot)
+  })
+
+
   distrib_r <- reactive({
     switch(
       input$loi,

inst/assets/js/capture.js

@@ -53,6 +53,7 @@
     var toCapture = el.getAttribute("data-selector");
     var node = document.querySelector(toCapture);
     var fileName = el.getAttribute("data-filename");
+    var inputId = el.getAttribute("data-inputId");
     var scale = parseInt(el.getAttribute("data-scale"));
     var options = el.getAttribute("data-options");
     options = JSON.parse(options);
@@ -70,7 +71,17 @@
     domtoimage
       .toBlob(node, options)
       .then(function(blob) {
-        window.saveAs(blob, fileName);
+        if (fileName !== null) {
+          window.saveAs(blob, fileName);
+        }
+        if (inputId !== null) {
+          var reader = new FileReader();
+          reader.readAsDataURL(blob); 
+          reader.onloadend = function() {
+            var base64data = reader.result;                
+            Shiny.setInputValue(inputId, base64data);
+          }
+        }
         el.classList.remove("disabled");
       })
       .catch(function(error) {