javascript - 使用 html2canvas 调整屏幕截图的高度和宽度？

Question

这是一个可重现的例子。我尝试添加高度和宽度选项，如图所示 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)

Answer 1

不确定从屏幕截图中删除 my 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");
           });')

希望这对您有所帮助!