Javascript 使用cropie.js裁剪上传的图像,并另存为jpeg

Javascript 使用cropie.js裁剪上传的图像,并另存为jpeg,javascript,r,shiny,crop,croppie,Javascript,R,Shiny,Crop,Croppie,我想在我的闪亮应用程序中添加简单的裁剪功能,上传的图像可以裁剪并保存到文件系统中 上传图像并使用cropie.js进行渲染的第一部分工作正常,但我无法在点击按钮时获得裁剪图像并将裁剪图像保存到www/folder的第二部分工作 第一个问题是在第二个JS代码块中无法再引用JS变量basic。即使这样,我也不知道如何使用变量cropedimage将图像作为jpeg文件保存到www文件夹中 编辑: 好的,我找到了一种方法,通过shinny.onInputChange将base64编码的图像从Javas

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

上传图像并使用cropie.js进行渲染的第一部分工作正常,但我无法在点击按钮时获得裁剪图像并将裁剪图像保存到www/folder的第二部分工作

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

编辑:

好的,我找到了一种方法,通过
shinny.onInputChange
将base64编码的图像从Javascript传递到R。现在我需要解码图像并用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)
库(闪亮)
图书馆(shinyjs)
图书馆(stringr)
图书馆(base64enc)
用户界面