使用shinyjqui时，imageOutput()的绘图纵横比出错

Question

我试图通过在shiny中调整imageOutput的大小来输出更高质量的图像。

确实，当我尝试使用shinyjqui时，我可以交互地调整它的大小，但它不会改变绘图的纵横比，所以它没有意义。

也许这是因为我指定了图像文件的宽度和高度，但我不知道如何解决这个问题。

library(ggplot2)
library(shiny)
library(shinyjqui)

# Define UI for app that draws a histogram ----
ui <- fluidPage(
  titlePanel("Hello Shiny!"),
  mainPanel(
    h3("Low resolution"),
    jqui_resizable(plotOutput(outputId = "Plot")),
    hr(),
    h3("High resolution"),
    jqui_resizable(imageOutput("myImage", height = "100%", width = "100%"))
  )
)

# Define server logic required to draw a histogram ----
server <- function(input, output, session) {
  
  
  
  output$Plot <- renderPlot({
    g <- ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width)) + geom_point()
    return(g)
    
  }
  #height = 200, width = 200 Adding This code, I cant move picture
  )
  
  
  # Plot the data ####
  output$myImage <- renderImage({
    g <- ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width)) + geom_point()
    # A temp file to save the output.
    # This file will be removed later by renderImage
    outfile <- tempfile(fileext = '.png')
    
    # Generate the PNG
    png(outfile, 
        width = 200*8, 
        height = 200*8,
        res = 72*8)
    print(g)
    dev.off()
    
    # Return a list containing the filename
    list(src = outfile,
         contentType = 'image/png',
         width = "100%",
         height = "100%",
         alt = "This is alternate text")}, deleteFile = TRUE)}

shinyApp(ui, server)

Answer 1

这是因为renderImage没有调整reactive的大小。这意味着，当您拖动图像并调整其大小时，图像不会重新生成，但您可以使用renderPlot重新生成图像，每次停止拖动时，都会使用新的纵横比创建一个新的绘图。我们可以用renderImage做同样的事情，但这要困难得多，因为我不认为renderPlot支持这一点。

我猜你面临的主要问题是获得更高的分辨率。如果是这种情况，我们仍然可以使用renderPlot，请查看此函数的帮助文件。它允许您添加已添加到png中的其他参数。你可以只做renderPlot({...}, res = 72*8, width = 200*8, height = 200*8)。

示例如下：

library(ggplot2)
library(shiny)
library(shinyjqui)

# Define UI for app that draws a histogram ----
ui <- fluidPage(
  titlePanel("Hello Shiny!"),
  mainPanel(
    h3("Low resolution"),
    jqui_resizable(plotOutput(outputId = "Plot")),
    hr(),
    h3("High resolution"),
    jqui_resizable(plotOutput("myImage", height = "800px"))
  )
)

# Define server logic required to draw a histogram ----
server <- function(input, output, session) {
  
  
  
  output$Plot <- renderPlot({
    g <- ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width)) + geom_point()
    return(g)
    
  }
  #height = 200, width = 200 Adding This code, I cant move picture
  )
  
  
  # Plot the data ####
  output$myImage <- renderPlot({
    ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width)) + geom_point()
    }, res = 72*8)
}

shinyApp(ui, server)

注意，我没有添加height和width，只是在plotOutput中添加了height。这是因为renderPlot是对拖动事件的反应，您不应该设置绘图高度和宽度，因为它会根据您的拖动自动更改。

我们在plotOutput中使用height的原因是，您希望在用户可以拖动绘图之前获得绘图的初始高度。在Bootstrap UI框架中，你通常不会设置宽度，它通常会自动适应父HTML节点的最大(100%)宽度。