使用shinyjqui调整Shiny的imageOutput时绘图宽高比异常如何解决

• 宽高比无法修改的核心原因有两点：

1. 你在png()函数里固定了生成图片的宽高为1:1比例，浏览器渲染图片时默认会保持原始比例适配容器，不会随容器拉伸改变比例
2. 未将前端调整后的容器尺寸同步到后端的图片生成逻辑，始终生成固定尺寸的图片

利用shinyjqui调整元素尺寸后自动生成的宽高输入值，动态生成对应尺寸的高分辨率图片，实现宽高比随拖拽调整同步变化，修改后的完整代码如下：

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

ui <- fluidPage(
  titlePanel("Hello Shiny!"),
  mainPanel(
    h3("低分辨率版本"),
    jqui_resizable(plotOutput(outputId = "Plot")),
    hr(),
    h3("高分辨率版本"),
    # 设置初始尺寸保证首次加载正常显示
    jqui_resizable(imageOutput("myImage", height = "400px", width = "400px"))
  )
)

server <- function(input, output, session) {
  
  output$Plot <- renderPlot({
    g <- ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width)) + geom_point()
    return(g)
  })
  
  output$myImage <- renderImage({
    # 读取调整后的容器宽高，未触发调整时用默认值400
    current_width <- ifelse(is.null(input$myImage_width), 400, input$myImage_width)
    current_height <- ifelse(is.null(input$myImage_height), 400, input$myImage_height)
    
    g <- ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width)) + geom_point()
    outfile <- tempfile(fileext = '.png')
    
    # 按当前容器尺寸生成对应比例的高分辨率图
    png(outfile, 
        width = current_width * 4, 
        height = current_height * 4,
        res = 72 * 4)
    print(g)
    dev.off()
    
    list(src = outfile,
         contentType = 'image/png',
         width = current_width,
         height = current_height,
         alt = "高分辨率散点图")
  }, deleteFile = TRUE)
}

shinyApp(ui, server)

• 调用shinyjqui自动生成的input$myImage_width和input$myImage_height参数，获取用户调整后的实际尺寸
• 生成png时按当前尺寸乘以缩放系数，既保证图片清晰度，又保证图片比例和调整后的容器完全匹配，不会出现拉伸变形
• 返回图片时指定实际宽高数值，避免比例适配偏差

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