如何让Shiny中renderPlot占满分配的全部空间？

To make your image fill the allocated space without excess white edges, you need to address two key issues: maintaining the image's aspect ratio in the UI container, and removing all padding/margins from the plot rendering. Here's how to fix it:

Modified Code #

library(shiny)
library(magick)
library(ggplot2)

ui <- fluidPage(
    tags$style('.container-fluid {background-color: #007BA7;}'),    
    column(6, 
           # Responsive container to maintain image aspect ratio (600x400 = 3:2)
           div(style = "position: relative; width: 100%; padding-top: 66.67%;",
               plotOutput("p", style = "position: absolute; top: 0; left: 0; width: 100%; height: 100%;"))
           )
)

server <- function(input, output, session){
  
    # Load image once for efficiency
    image <- image_read('https://raw.githubusercontent.com/R-CoderDotCom/samples/main/bird.png')
    image <- image_background(image, color = "#cbe7ff")
    img_raster <- as.raster(image)
    img_dims <- image_info(image)
    aspect_ratio <- img_dims$width / img_dims$height # Calculate image aspect ratio
    
    output$p <- renderPlot({
        ggplot() +
            annotation_raster(img_raster, xmin = 0, xmax = 1, ymin = 0, ymax = 1) +
            theme_void() + # Removes all axes, titles, and margins
            theme(plot.margin = margin(0, 0, 0, 0, unit = "pt")) +
            coord_fixed(ratio = aspect_ratio) # Forces plot to match image's aspect ratio
    }, bg = "#cbe7ff") # Match plot background to image background
}

shinyApp(ui = ui, server = server)

Key Fixes Explained #

1. Responsive UI Container:

   • The wrapping div uses padding-top: 66.67% (calculated as (image height / image width) * 100 = 400/600*100) to lock in the image's aspect ratio. This ensures the plot area always has the correct proportions, so the image fits without stretching or leaving white space.
   • The plotOutput is positioned absolutely inside the div to fill the entire container.

2. Plot Rendering Adjustments:

   • ggplot2 with theme_void() removes all default margins, axes, and padding.
   • coord_fixed(ratio = aspect_ratio) ensures the plot's aspect ratio matches the image's, preventing distortion.
   • Setting bg = "#cbe7ff" in renderPlot() matches the plot background to your image's background, eliminating any tiny remaining white edges.

3. Performance Optimization:

   • Loading the image once outside renderPlot() avoids reloading it every time the plot refreshes, improving app speed.

Alternative Base Plot Approach #

If you prefer base R plotting instead of ggplot2, use this modified server code:

server <- function(input, output, session){
  
    image <- image_read('https://raw.githubusercontent.com/R-CoderDotCom/samples/main/bird.png')
    image <- image_background(image, color = "#cbe7ff")
    img_raster <- as.raster(image)
    
    output$p <- renderPlot({
        par(mar = c(0, 0, 0, 0), xaxs = "i", yaxs = "i") # Remove margins and axis padding
        plot(img_raster, axes = FALSE, xlab = "", ylab = "", asp = ncol(img_raster)/nrow(img_raster))
    }, bg = "#cbe7ff")
}

This uses par(mar = c(0,0,0,0)) along with xaxs = "i"/yaxs = "i" to remove all padding, and asp to set the correct aspect ratio.

内容的提问来源于stack exchange，提问作者user2602640