canvas shinyace

canvasAce

library(shiny)
library(shinyAce)

modes <- getAceModes()
themes <- getAceThemes()

init <- "createData <- function(rows) {
  data.frame(col1 = 1:rows, col2 = rnorm(rows))
}"

l <-   shiny::tagList(
  shiny::tags$script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'),
  shiny::tags$script(src='https://html2canvas.hertzen.com/dist/html2canvas.js'),
  shiny::tags$script('$(document).ready(function(){
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
 
    $("#btn-Preview-Image").on("click", function () {
    
    html2canvas(element[0]).then(function(canvas) {
    $("#previewImage").empty()
      $("#previewImage").append(canvas);
        getCanvas = canvas;
    });
    
    });

	$("#btn-Convert-Html2Image").click(function () {
	
	html2canvas(element[0]).then(function(canvas) {
    saveAs(canvas.toDataURL(), "canvas.png");
  });
	
	});
	
	function saveAs(uri, filename) {
        var link = document.createElement("a");
        if (typeof link.download === "string") {
          link.href = uri;
          link.download = filename;

          //Firefox requires the link to be in the body
          document.body.appendChild(link);

          //simulate click
          link.click();

          //remove the link when done
          document.body.removeChild(link);
        } else {
          window.open(uri);
        }
      }

});'))


# define UI for application that demonstrates a simple Ace editor
ui <- pageWithSidebar(
  headerPanel("Simple Shiny Ace!"),
  sidebarPanel(
    l,
    selectInput("mode", "Mode: ", choices = modes, selected = "r"),
    selectInput("theme", "Theme: ", choices = themes, selected = "ambience"),
    numericInput("size", "Tab size:", 4),
    radioButtons("soft", NULL, c("Soft tabs" = TRUE, "Hard tabs" = FALSE), inline = TRUE),
    radioButtons("invisible", NULL, c("Hide invisibles" = FALSE, "Show invisibles" = TRUE), inline = TRUE),
    actionButton("reset", "Reset text"),
    actionButton("clear", "Clear text"),
    actionButton('btn-Preview-Image','preview'),
    actionButton('btn-Convert-Html2Image','Download'),
    HTML("<hr />"),
    helpText(HTML("A simple Shiny Ace editor.
                  <p>Created using <a href = \"http://github.com/trestletech/shinyAce\">shinyAce</a>."))),
  mainPanel(
    shiny::tags$div(id = 'html-content-holder',
                    aceEditor(
                      outputId = "ace",
                      # to access content of `selectionId` in server.R use `ace_selection`
                      # i.e., the outputId is prepended to the selectionId for use
                      # with Shiny modules
                      selectionId = "selection",
                      value = init,
                      placeholder = "Show a placeholder when the editor is empty ...")
  ),
  shiny::tags$h3('Preview'),
  shiny::tags$div(id = 'previewImage')
  )
)

# define server logic required to generate simple ace editor
server <- function(input, output, session) {

  output$downloadData <- downloadHandler(
    filename = function() {
      paste('carbonace-', Sys.Date(), '.png', sep='')
    },
    content = function(con) {
      write.csv(data, con)
    }
  )
  
  observe({
    updateAceEditor(
      session,
      "ace",
      theme = input$theme,
      mode = input$mode,
      tabSize = input$size,
      useSoftTabs = as.logical(input$soft),
      showInvisibles = as.logical(input$invisible)
    )
  })
  
  observeEvent(input$reset, {
    updateAceEditor(session, "ace", value = init)
  })
  
  observeEvent(input$clear, {
    updateAceEditor(session, "ace", value = "")
  })
}
options(shiny.launch.browser = TRUE)
# Return a Shiny app object
shinyApp(ui = ui, server = server)