RenderImage 来自 URL 且可点击

Question

我想弄清楚如何在 Shiny 中将 renderImage 与在线定位图像 (URL) 一起使用，并使图像可点击，以便我可以将 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），它会显示一个空方块。虽然仍然可以点击。

URL可以使用 `renderUI()`

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()，它会引发 'invalid file argument' 错误。

带有 renderText 的 html 输出

我也尝试了另一个 SO post 中的这个版本，但还是无法点击。这种方法是基于这个

的答案

 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 App，这似乎更有意义。因此，确实需要一个允许渲染 URL 图像并让它们可点击的解决方案。如果有人可以解释为什么 click = 仅适用于 imageOutput 的本地文件，则加分。

Answer 1

如何将图像从 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)

Answer 2

一种替代方法是使用 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)

RenderImage 来自 URL 且可点击

RenderImage from URL and clickable

html

url

r

render

shiny

可点击

URL可以使用 renderUI()

带有 renderText 的 html 输出

URL可以使用 `renderUI()`