Zoom in & Zoom out in R Shiny while working with images

[qriousearthling]

Hi Everyone, I am working on a R Shiny dashboard where I need to zoom in & zoom out images. Is this capability built-in in any of the shiny functions? If anyone has any resources please do share

[nirgrahamuk]

I made a module as a way to do it

library(shiny)

scaledImageUI <- function(id,width="50%") {
  ns <- NS(id)
  div(
    div(style=paste0("width:",width,";
        display:flex;
        justify-content: space-evenly;"),
        actionButton(inputId = ns("smaller_1"),label = "-"),
        actionButton(inputId = ns("bigger_1"),label = "+")),
    uiOutput(ns("myscaledimage"))
    
  )
}

scaledImageServer <- function(id,src) {
  moduleServer(
    id,
    function(input, output, session) {
      
      chosen_scale <- reactiveVal(300)
      
      observeEvent(input$smaller_1,{
        cs <- chosen_scale()
        if(cs>=100)
          chosen_scale(cs-50)
      })
      
      observeEvent(input$bigger_1,{
        cs <- chosen_scale()
        if(cs<=100)
          chosen_scale(cs+50)
      })
      
      output$myscaledimage <- renderUI({
        cs <- req(chosen_scale())
        div(
          div(style=paste0("zoom: ",cs,"%;overflow:auto;"),
              tags$img(src=
                         src)
          )
        )
      })
    }
  )
}

ui <- fluidPage(
  fluidRow(
  scaledImageUI("my_s_img")
  )
)

server <- function(input, output, session) {
 
  scaledImageServer(id = "my_s_img",
                    src =   "https://www.google.com/logos/doodles/2024/nowruz-2024-6753651837110448-l.png"
                    )
  

}

shinyApp(ui, server)