Javascript 使用html2canvas调整屏幕截图的高度和宽度?
这是一个可复制的例子。我尝试添加高度和宽度选项,如图所示,但它们不会影响我的屏幕截图。这是因为我使用body作为元素吗?我想从截图中删除我的shinyapp的底部。正如您可能知道的,我对javascript和一般编码都是新手,非常感谢您的帮助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
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中排除某些部分的方法吗?