2

ユーザーが画像をサーバーにアップロードできる光沢のあるアプリを構築しています。最初にアップロードせずに画面に画像を表示してから、レンダリングされた出力を取得したいと思います。これは可能ですか？

これが今の私のコードです。アップロードする画像ファイルを選択できます。画像は、受信後にサーバー側のファイルからレンダリングされます。往復は避けたいです。

UI

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
}
4

2 に答える 2

1

編集： さて、私は今、質問は私にとって明確です、私は願っています:)。問題は、画像が 内に追加されること<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);")

  })
于 2017-02-11T20:36:54.087 に答える