用于可视化大图像的 UI 小部件答案

【问题标题】：UI widgets for visualize large image用于可视化大图像的 UI 小部件
【发布时间】：2020-05-27 06:19:46
【问题描述】：

是否有任何好的工具/UI 小部件可以可视化大图像/pdf 文档。希望有一个工具，其行为类似于 google 地图的可视化方式，您可以在其中具有缩放功能并可以拖动到图像的不同部分

【问题讨论】：

【解决方案1】：

对于 PDF，我不知道。对于图像，您可以尝试 JavaScript 库 imgViewer2。

library(shiny)

js <- '$(document).ready(function(){ $("#myimage").imgViewer2(); });'

ui <- fluidPage(
  tags$head(
    tags$link(
      rel = "stylesheet", 
      href = "https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"),
    tags$link(
      rel = "stylesheet", 
      href = "http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css", 
      media = "screen"),
    tags$script(src = "https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"),
    tags$script(src = "http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"),
    tags$script(
      src = "https://cdn.jsdelivr.net/npm/imgviewer2@1.1.0/src/imgViewer2.min.js"),
    tags$script(HTML(js))
  ),
  br(),
  tags$img(id = "myimage", 
           src = "https://images.plot.ly/language-icons/api-home/r-logo.png", 
           width = "20%")
)

server <- function(input, output, session){}

shinyApp(ui, server)

或panzoom 库：

library(shiny)

js <- '
$(document).ready(function(){ 
  var img = document.getElementById("myimage");
  panzoom(img);
});'

ui <- fluidPage(
  tags$head(
    tags$script(
      src = "https://unpkg.com/panzoom@8.7.3/dist/panzoom.min.js"),
    tags$script(HTML(js))
  ),
  br(),
  tags$img(id = "myimage", 
           src = "https://images.plot.ly/language-icons/api-home/r-logo.png", 
           width = "20%")
)

server <- function(input, output, session){}

shinyApp(ui, server)

或者试试R包svgPanZoom。

【讨论】：