使用html2canvas调整屏幕截图的高度和宽度吗?

问题描述 投票:2回答:1

这里是可复制的示例。我尝试添加here显示的高度和宽度选项,但它们不会影响我的屏幕截图。这是因为我使用body作为元素吗?我只想从屏幕截图中删除我的Shinyapp的底部。如您所知,一般来说,我对javascript和编码都是陌生的,非常感谢您的帮助。

library(shiny)
library(shinyjs)
library(DT)
library(ggplot2)

ui <- fluidPage(
  tags$head(
    # include html2canvas library
    tags$script(src = "http://html2canvas.hertzen.com/dist/html2canvas.min.js"),
    # script for creating the prompt for download
    tags$script(
      "
            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);

                }
            }
            "
    )
  ),
  useShinyjs(),
  actionButton("screenshot","Take Screenshot"),
  dataTableOutput("table"),
  plotOutput("plot")


)

server <- function(input, output, session) {
  observeEvent(input$screenshot,{
    shinyjs::runjs(
      'html2canvas(document.querySelector("body")).then(canvas => {
                saveAs(canvas.toDataURL(), "shinyapp.png");
           });'
    )
  })


  output$table <- renderDataTable(iris)

  output$plot <- renderPlot(ggplot(data = iris) + 
                              geom_point(aes(x = Sepal.Length, y = Sepal.Width)))
}

shinyApp(ui, server)
javascript shiny html2canvas shinyapps
1个回答
0
投票

不确定您的意思是从屏幕快照中删除我的Shinyapp的底部。这是一个仅打印表格或绘图图像作为屏幕截图的工作示例。

# To print only the table in the screenshot
shinyjs::runjs(
      'html2canvas(document.querySelector("table")).then(canvas => {
                saveAs(canvas.toDataURL(), "shinyapp.png");
           });')

# To print only the image in the screenshot
shinyjs::runjs(
      'html2canvas(document.querySelector("img")).then(canvas => {
                saveAs(canvas.toDataURL(), "shinyapp.png");
           });')

希望这会有所帮助!

© www.soinside.com 2019 - 2024. All rights reserved.