2

我想在我闪亮的应用程序中添加简单的裁剪功能，可以裁剪上传的图像并将其保存到文件系统中。

上传图像和使用croppie.js 渲染的第一部分有效，但我无法在按钮单击工作时获得裁剪并将裁剪图像保存到 www/ 文件夹的第二部分。

第一个问题是在第二个 JS 代码块中不能再引用 JS 变量 basic。即使，我也不知道如何使用变量croppedImage 将图像作为jpeg 文件保存到www 文件夹。

编辑：

好的，我找到了一种将 base64 编码图像从 Javascript 传递给 R 的方法Shiny.onInputChange。现在我需要解码图像并使用 R 保存。但这不起作用，图像文件已保存，但无法打开。

library(shiny)
library(shinyjs)
library(stringr)
library(base64enc)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  tags$head(HTML('<link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.4.0/croppie.css" rel="stylesheet">')),
  tags$script(src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"),
  tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/croppie/2.4.0/croppie.js"),
  fileInput("image_upload",
            label = "Image", width = "300px",
            accept = c("image/png", "image/jpeg", "image/jpg")),
  div(id = "demo-basic", style = "
    width: 900px;
    height: 600px;"),
  br(),
  br(),
  actionButton("crop", "Crop image")
)

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

  observeEvent(input$image_upload, {
    file.rename(input$image_upload$datapath, str_c("www/image0.jpg"))

    runjs(paste0("
                $(function () {
                  var basic = $('#demo-basic').croppie({
                viewport: {
                  width: 900,
                  height: 600
                }
        });
          basic.croppie('bind', {
            url: 'image0.jpg'
          });
    });
    "))
  })

 observeEvent(input$crop, {
    runjs("
var basic = $('#demo-basic').croppie({
  viewport: {
    width: 900,
    height: 600
  }
});

basic.croppie('result', {
  format: 'jpeg'
}).then(function(croppedImage) {
  Shiny.onInputChange('cropped', croppedImage);
});
    ")
  })

  observeEvent(input$cropped, {
    # This does not work yet
    enc <- input$cropped
    outconn <- file("cropped.jpeg","wb")
    base64decode(what = enc, output = outconn)
    close(outconn)
  })
}

shinyApp(ui, server)
4

0 回答 0