3

I have a static png file of several thousand pixels height and width, and I would like to visualize parts of if by interactively zooming in and out of it in an RStudio Shiny website. What is the best way to have this working in a way that is relatively well performing?

1 Answer 1

3

You can use any of a number of javascript libraries. I chose https://github.com/elevateweb/elevatezoom to use in this example:

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 = "http://i.stack.imgur.com/RWd7T.png?s=128&g=1",  "data-zoom-image" ="http://i.stack.imgur.com/RWd7T.png?s=128&g=1")
         })

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

enter image description here

4

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.