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

Javascript 使用html2canvas调整屏幕截图的高度和宽度?,javascript,shiny,html2canvas,shinyapps,Javascript,Shiny,Html2canvas,Shinyapps,这是一个可复制的例子。我尝试添加高度和宽度选项,如图所示,但它们不会影响我的屏幕截图。这是因为我使用body作为元素吗?我想从截图中删除我的shinyapp的底部。正如您可能知道的,我对javascript和一般编码都是新手,非常感谢您的帮助 library(shiny) library(shinyjs) library(DT) library(ggplot2) ui <- fluidPage( tags$head( # include html2canvas library

这是一个可复制的例子。我尝试添加高度和宽度选项,如图所示,但它们不会影响我的屏幕截图。这是因为我使用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)
库(闪亮)
图书馆(shinyjs)
图书馆(DT)
图书馆(GG2)

ui不确定您所说的是什么意思从屏幕截图中删除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");
           });')

希望这有帮助

你所说的闪亮应用程序的底部是什么意思?您是否只需要将表格添加到屏幕截图中?抱歉,不清楚-在我的应用程序中,我希望屏幕截图排除页面底部的一些空白和注释。谢谢您的建议!对于我的应用程序,我没有要排除的特定表格或图表,但我只想排除应用程序底部的空白和注释。调整高度是最简单的方法,还是使用ignoreElements并传入我不希望包含的单个元素?我不确定我是否可以在空白处使用ignoreElements。你能添加一个你想要实现的截图吗?嘿@Siddharth我刚刚用截图更新了我的帖子,但不得不审查一些信息。我只想删除底部突出显示的黄色部分。然而,在我的截图中添加高度选项没有任何影响——我相信这可能是因为我使用了“身体”作为我的元素?您知道在html2canvas中排除某些部分的方法吗?