Plot Aspect Ratio of imageOutput() go wrong using shinyjqui

Question

I tried to output a higher quality image by resizing the imageOutput in shiny.

It's true that when I try to use shinyjqui, I can resize it interactively, but it doesn't change the aspect ratio of the plot, so it doesn't make sense.

Perhaps this is due to the fact that I am specifying the width and height of the image file, but I don't know how to solve this.

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)

Take a look at the [aspect ratio options of resizeable](https://api.jqueryui.com/resizable/#option-aspectRatio) — lz100, Oct 15 '21 at 23:29
Thank you very much. I was able to maintain the aspect ratio. But what I want to do is to make it longer both vertically and horizontally, just like the low-resolution graph. In other words, I want to be able to do in the high resolution graph what I can do in the low resolution graph. If I want to just maintain the aspect ratio, I can do the same thing with the downloaded image. — Shu, Oct 16 '21 at 02:49

score 0 · Answer 1 · answered Oct 18 '21 at 19:04

This is because renderImage is not resizing reactive. That means, when you are dragging and resize the image, the image is not regenerated, but you do it with renderPlot, every time you stop dragging, a new plot with the new aspect ratio is created. We can do the same thing with renderImage, but it's much harder, since I don't think this is supported as renderPlot.

I guess the main problem you are facing is to get a higher resolution. If this is the case, we can still use renderPlot, check the help files of this function. It allows you to add additional arguments that you have added to png. You can just do renderPlot({...}, res = 72*8, width = 200*8, height = 200*8).

Here is the example:

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)

Notice I didn't add height and width, but only added height to plotOutput. This is because renderPlot is reactive to your drag event and you shouldn't set the plot height and width, because it will change automatically based on your dragging.

The reason we have height in plotOutput is that you want to have an initial height of the plot before users can drag it. In Bootstrap UI framework, you usually don't set the width, it usually automatically fit the max (100%) width of parent HTML node.

Plot Aspect Ratio of imageOutput() go wrong using shinyjqui

1 Answers1