Карта масштабируемого изображения в RStudio Shiny

Question

У меня есть статический png-файл высотой и шириной в несколько тысяч пикселей, и я хотел бы визуализировать его части, интерактивно увеличивая и уменьшая его на веб-сайте RStudio Shiny. Каков наилучший способ заставить эту работу работать относительно хорошо?

Answer 1

Вы можете использовать любую из нескольких библиотек JavaScript. Я выбрал https://github.com/elevateweb/elevatezoom для использования в этом примере:

library(shiny)
runApp(
  list(ui = fluidPage(
    tags$head(tags$script(src = "http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js")),
      actionButton("myBtn", "Press Me for zoom!"), 
      uiOutput("myImage"),
    singleton(
      tags$head(tags$script('Shiny.addCustomMessageHandler("testmessage",
  function(message) {
    $("#myImage img").elevateZoom({scrollZoom : true});
  }
);'))
    )
    )
       , server = function(input, output, session){
         output$myImage <- renderUI({
           img(src = "https://stackru.com/images/6910e8cecf0c71d2fb3197ea2d41b6a1326a6f3f.png?s=128&g=1",  "data-zoom-image" ="https://stackru.com/images/6910e8cecf0c71d2fb3197ea2d41b6a1326a6f3f.png?s=128&g=1")
         })

         observe({
           if(input$myBtn > 0){
             session$sendCustomMessage(type = 'testmessage',
                                       message = list())             
           }
         })
       }
       )
  )