javascript - 玩 scala 浏览图像然后裁剪并提交到表单中

Question

在我的 Play Framework Scala 项目中，我想在表单提交时上传图片，为此我使用了以下代码

form.scala.html

    @form(routes.Users.register(),'enctype -> "multipart/form-data") {
 @inputFile(field = algorithmForm("profileimage"), '_label -> "User Icon")
       <input type="submit" value="Add user" >
}

Users.scala

 request.body.file("profileimage").map { picture =>
        import java.io.File
        val filename = picture.filename
        val contentType = picture.contentType

        picture.ref.moveTo(new File("D:\\User\\"+filename))   
        Ok("file created")
      }.getOrElse {
        Redirect(routes.Application.index).flashing(
          "error" -> "Missing file")
      }

我真正需要的

需要在view页面显示选中的图片，然后对该图片进行裁剪操作，在表单提交上需要上传裁剪后的图片图片放到指定位置。所以我用了https://github.com/andyvr/picEdit这个插件 我已经用这个 plugin 完成了所有这些想法，但不幸的是我无法提交它不起作用的表单。所以请建议任何具有上述功能的 plugin提交选项启用。

编辑

我裁剪并提交图像和其他表单值。它正在复制一个文件特别提到的目录，但图像是 original 不是 cropped image.actually 我需要一个裁剪图像保存在相应的目录中。而且它也不会重定向到其他页面。我使用了 Ok("submitted") , Redirect() 方法，但它没有这样做。

Answer 1

你检查过Picture Cut JQuery插件吗Github URL . 我希望它会有所帮助。该插件具有裁剪、拖放等功能。请看一下。

否则您可以查看以下link其中展示了更多此类插件