在 Shiny 中上传之前渲染图像

Question

我正在构建一个 Shiny 应用程序，让用户可以将图像上传到服务器。我想在屏幕上显示图像，而不必先上传它，然后再取回渲染的输出。这可能吗？

这是我现在的代码。您可以选择上传的图像文件。然后在接收到图像后，从服务器端的文件中渲染图像。我想避免往返。

用户界面

fluidPage(
    titlePanel("File upload"),
    sidebarLayout(
        sidebarPanel(
            fileInput("img", "Choose image file",
                accept=c("image/jpeg", "image/x-windows-bmp"))
        ),
        mainPanel(
            imageOutput("picture", width="500px", height="500px")
        )
    )
)

服务器

function(input, output, session)
{
    output$picture <- renderImage({
        imgFile <- input$img
        if(is.null(imgFile))
            return(list(src=""))
        list(src=imgFile$datapath, alt=imgFile$name, contentType=imgFile$type)
    }, deleteFile=FALSE)

    # do more stuff with the file
}

Answer 1

您可以使用包 shinyjs 从 HTML 5 read here 调用 FileReader

library(shinyjs)
shinyApp(ui = fluidPage(
  useShinyjs(),
  titlePanel("File upload"),
  sidebarLayout(
    sidebarPanel(
      fileInput("img", "Choose image file",
                accept=c("image/jpeg", "image/x-windows-bmp")),
      HTML('<output id="list"></output>')
    ),
    mainPanel(
      imageOutput("picture", width="500px", height="500px")
    )
  )), 
server = function(input, output, session){ 
  shinyjs::runjs("

  function handleFileSelect(evt) {
   var files = evt.target.files; // FileList object
   // Loop through the FileList and render image files as thumbnails.
   for (var i = 0, f; f = files[i]; i++) {

   // Only process image files.
   if (!f.type.match('image.*')) {
   continue;
   }

   var reader = new FileReader();

   // Closure to capture the file information.
   reader.onload = (function(theFile) {
   return function(e) {
   // Render thumbnail.
   var span = document.createElement('span');
   span.innerHTML = ['<img class=\"thumb\" src=\"', e.target.result,
   '\" title=\"', escape(theFile.name), '\"/>'].join('');
   document.getElementById('list').insertBefore(span, null);
   };
   })(f);

   // Read in the image file as a data URL.
   reader.readAsDataURL(f);
   }
   }
   document.getElementById('img').addEventListener('change', handleFileSelect, false);")

  output$picture <- renderImage({
    imgFile <- input$img
    if(is.null(imgFile))
      return(list(src=""))
    list(src=imgFile$datapath, alt=imgFile$name, contentType=imgFile$type)
    }, deleteFile=FALSE)
})

Answer 2

编辑： 好的，我现在的问题对我来说很清楚，我希望:)。 问题是图片是在<output id="list"></output> 中添加的。所以我建议在添加新图片之前清除它：document.getElementById('list').innerHTML = ''

library(shiny)
library(shinyjs)
shinyApp(ui = fluidPage(
  useShinyjs(),
  titlePanel("File upload"),
  sidebarLayout(
    sidebarPanel(
      fileInput("img", "Choose image file",
                accept=c("image/jpeg", "image/x-windows-bmp"))
    ),
    mainPanel(
      HTML('<output id="list"></output>')
    )
  )), 
  server = function(input, output, session){ 
    shinyjs::runjs("

                   function handleFileSelect(evt) {
                   document.getElementById('list').innerHTML = ''
                   var files = evt.target.files; // FileList object
                   // Loop through the FileList and render image files as thumbnails.
                   for (var i = 0, f; f = files[i]; i++) {

                   // Only process image files.
                   if (!f.type.match('image.*')) {
                   continue;
                   }

                   var reader = new FileReader();

                   // Closure to capture the file information.
                   reader.onload = (function(theFile) {
                   return function(e) {
                   // Render thumbnail.
                   var span = document.createElement('span');
                   span.innerHTML = ['<img class=\"thumb\" src=\"', e.target.result,
                   '\" title=\"', escape(theFile.name), '\"/>'].join('');
                   document.getElementById('list').insertBefore(span, null);
                   };
                   })(f);

                   // Read in the image file as a data URL.
                   reader.readAsDataURL(f);
                   }
                   }
                   document.getElementById('img').addEventListener('change', handleFileSelect, false);")

  })