如何在闪亮的上传图片中创建旋转按钮

Question

我正在 shinyApp 中上传图片并像下面的代码一样渲染

library(shiny)
library(base64enc)

ui <- fluidPage(
  fileInput("image","Photo"),
  uiOutput("image"),
  actionButton("rotate_image","Rotate")
)

server <- function(input, output, session) {
  # check ext
  valid_extensions <- c("png", "jpeg", "jpg")
  
  # update img when change
  base64 <- reactive({
    req(input$image)
    inFile <- input[["image"]]
    if (!is.null(inFile) && tools::file_ext(input$image$name) %in% valid_extensions) {
      dataURI(file = inFile$datapath, mime = "image/png")
    }
  })
  
  # render the uploaded image
  output[["image"]] <- renderUI({
    if (!is.null(base64()) && tools::file_ext(input$image$name) %in% valid_extensions) {
      tags$div(
        tags$img(src = base64()),
      )
    }
  })
}

shinyApp(ui, server)

我想我需要 observeEvent(input$rotate_image) 并使用 magick::image_rotate() 之类的东西，但我找不到任何解决方案。

此致

Answer 1

您可以使用 jQueryRotate。下载文件 jQueryRotate.js 并将其放入应用程序的 www 子文件夹中。

library(shiny)
library(base64enc)

js <- '$("#myimage").rotate({angle:0, animateTo:360});'

ui <- fluidPage(
  tags$head(
    tags$script(src = "jQueryRotate.js")
  ),
  br(),
  fileInput("image","Photo"),
  uiOutput("image"),
  br(),
  actionButton("rotate_image", "Rotate", onclick = js)
)

server <- function(input, output, session) {
  # check ext
  valid_extensions <- c("png", "jpeg", "jpg")
  
  # update img when change
  base64 <- reactive({
    req(input$image)
    inFile <- input[["image"]]
    if(
      !is.null(inFile) && 
      tools::file_ext(input$image$name) %in% valid_extensions
    ){
      dataURI(file = inFile$datapath, mime = "image/png")
    }
  })
  
  # render the uploaded image
  output[["image"]] <- renderUI({
    if(
      !is.null(base64()) && 
      tools::file_ext(input$image$name) %in% valid_extensions
    ){
      tags$div(
        tags$img(id = "myimage", src = base64(), width = "50%"),
      )
    }
  })
}

shinyApp(ui, server)

如何在闪亮的上传图片中创建旋转按钮

How to create a rotate button in shiny uploaded image

r

shiny