使用Shiny和renderImage()灵活调整预渲染图像的宽度和高度

时间:2015-03-21 03:57:55

标签: shiny

我使用renderImage()将一堆预渲染图像调用到Shiny应用程序中。我希望这些png图像位于侧边栏中,并根据浏览器或设备类型(例如,Chrome,Android)调整宽度和高度。因此,我希望该应用程序是移动友好的。我无法弄清楚如何使它像这样灵活(例如,max-width = 500px或width = 100%,就像你在其他语言中那样)。

一个简单的例子:

shinyUI(fluidPage(
  titlePanel("title panel"),

  sidebarLayout(
    sidebarPanel( "sidebar panel",
                  sliderInput("route", label = "Route Number:",
                              min = 1, max = 5, value = 1),
                  imageOutput("Image")),
    mainPanel("main panel")
  )
))

和server.R:

shinyServer(function(input, output) {
  output$Image <- renderImage({
    filename <- normalizePath(file.path('www/maps',
                                        paste(input$route, '.png', sep='')))
        list(src = filename,
         alt = paste("Image number", input$route))

  }, deleteFile = FALSE)
})

干杯,

凯特琳

2 个答案:

答案 0 :(得分:2)

我有同样的问题,但有可能处理Shiny内部的问题。 这是我做的:

     output$photokib <- renderImage({
  ak <- formatC(ak, width = 4, format = "d", flag = "0")
  photo <- normalizePath(file.path('Data/photos',
                                         paste(image,'_1','.jpg', sep='' )))
  list(src = photo,
       width = 400,
       height = 300)
},deleteFile = FALSE)

答案 1 :(得分:1)

自己想出来。据我所知,没有办法在R中处理这个问题。相反,使用你的样式表(例如,bootstrap.css)添加如下内容:

   img {
      border: 1;
      max-width: 100%;
    }
    element.style {
      width: 33.33%;
    }

我也成功地使用了Shiny中的传单地图。这就是我在样式表中所做的:

div#myChart2 {
  width: inherit;
}