来自 URL 和可点击的 RenderImage

Question

我想弄清楚如何在 Shiny 中使用带有在线定位图像 (URL) 的 renderImage，并使图像可点击，以便我可以在其上挂起一个 observeEvent()。我可以做这两件事，但不能一起做。我呈现 URL 的方法不适用于单击，并且允许单击的本地图像版本不呈现 URL 图像。

这是两个半工作版本： 我从here 中获得了一些灵感，用于

可点击

library(shiny)

ui <- fluidPage(
        imageOutput("image1", click = "MyImage")
  )

server <- function(input, output, session) {
  setwd(Set the directory of the image in here)    #### modify to test
  output$image1 <- renderImage({
    list(
      src = "YOUR_IMAGE.png",                     #### modify to test
      contentType = "image/png",
      width = 90,
      height = 78,
      alt = "This is alternate text"
    )}, deleteFile = FALSE)
  observeEvent(input$MyImage, { print("Hey there")})
}
shinyApp(ui, server)

如果我将 URL 放入（并删除 deleteFile = FALSE），它会显示一个空方块。虽然仍然可以点击。

可使用renderUI() 进行URL

library(shiny)

ui <- fluidPage(
           uiOutput("image1", click = "MyImage")
  )

server <- function(input, output, session) {
  setwd(AppDir)

  output$image1<- renderUI({
    imgurl2 <- "https://www.rstudio.com/wp-content/uploads/2014/07/RStudio-Logo-Blue-Gradient.png"
    tags$img(src=imgurl2, width = 200, height = 100)
  })
 observeEvent(input$MyImage, { print("Hey there")})
}
shinyApp(ui, server)

显示图像，但图像不再可点击。

如果我在示例 2 中将 renderUI() 和 uiOuput() 更改为 renderImage() 和 imageOutput()，则会引发“文件参数无效”错误。

htmlOutput 和 renderText

我也尝试了其他 SO 帖子中的这个版本，但同样无法点击。这种方法基于link上的答案

 library(shiny)

  ui <- fluidPage(
    htmlOutput("image1", click = "MyImage")
  )

  server <- function(input, output, session) {
    setwd(AppDir)
    imgurl2 <- "https://www.rstudio.com/wp-content/uploads/2014/07/RStudio-Logo-Blue-Gradient.png"

    output$image1<- renderText({c('<img src="',imgurl2,'">')})

    observeEvent(input$MyImage, { print("Hey there")})
  }
  shinyApp(ui, server)

我想摆脱本地图像，因为一旦我们发布了 Shiny 应用程序，这似乎更有意义。因此，确实需要一种允许呈现 URL 图像并使其可点击的解决方案。如果有人可以解释为什么click = 仅适用于带有 imageOutput 的本地文件，则可以加分。

Answer 1

另一种方法是使用shinyjs 库中的onclick 函数。它允许您将点击事件包含到特定的 html 元素（以 id 为目标）。

Here's the documentation

在您的情况下，代码如下所示：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  uiOutput("image1", click = "MyImage")
)

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

  output$image1<- renderUI({
    imgurl2 <- "https://www.rstudio.com/wp-content/uploads/2014/07/RStudio-Logo-Blue-Gradient.png"

    div(id = "myImage",
      tags$img(src = imgurl2, width = 200, height = 100)
    )
  })
  onclick(
    myImage, 
    { 
      # Do whatever you want!
      print("Hey there")
    }
  )
}

shinyApp(ui, server)

Answer 2

如何将图像从 url 转换为 ggplot 为：

library(magick)
library(cowplot)
library(gtools)
library(shiny)

ui <- fluidPage(
  uiOutput("myplotoutput"),
  uiOutput("text")  
)

server <- function(input, output, session) {
  output$myplotoutput = renderUI( {
    plotOutput("urlimage", click=clickOpts(id="myclick") )
}  )

output$text=renderUI({
    validate(
      need(try(!invalid(input$myclick)), "Text will appear here")
    )
    textOutput("reactext")
})

output$reactext<-renderText(mytext$texto)

output$urlimage<- renderPlot({
g<-  ggdraw() +   draw_image("https://jeroen.github.io/images/frink.png")
g
})

mytext<-reactiveValues()  

observeEvent(input$myclick, {
    mytext$texto<-"Hey there"
})
} 

shinyApp(ui, server)