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?

jdharrison
  • 30,085
  • 4
  • 77
  • 89
719016
  • 9,922
  • 20
  • 85
  • 158

1 Answers1

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

jdharrison
  • 30,085
  • 4
  • 77
  • 89
  • Extra question: can I trigger an event coming from selecting a rectangle from a part of the image? I explicitly would like to be able to select rectangles besides squares. I can post this as a new question if fundamentally different to this one. – 719016 Sep 25 '14 at 18:42
  • Not sure I understand what you are asking. I think post as a seperate question. – jdharrison Sep 25 '14 at 19:37
  • http://stackoverflow.com/questions/26047869/zoomable-and-selectable-image-in-rstudio-shiny – 719016 Sep 25 '14 at 20:51
  • does this 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") mean that there has to be a copy of the image with a higher resolution (probably) ? – shashankp Oct 05 '20 at 12:15