裁剪图像并将其发送到JSFbean，而无需进行不必要的数据传输

我想将jquery裁剪器生成的图像上传到bean字段

我发现的客户端：

---

尽管在网上可以找到一些误导性的答案，但一旦理解了这个过程，它实际上相当简单。我希望这对将来有帮助

我使用的技术是：

拾取图像

拾取图像后，将其显示在裁剪器中，而无需通过导线发送

这里有几个选项，我选择了：当用户移动裁剪器矩形时，矩形的坐标填充一个隐藏的输入字段

将坐标发送到bean并在服务器端裁剪它

我这样做是因为我想要使用的裁剪器没有将图像转换为基64，只是给出了一个矩形的坐标。然而，如果有人想在将来直接发送裁剪后的图像，我想这将非常容易。就像我所做的那样，只是你必须把裁剪后的图像作为字符串base 64放在一个隐藏的输入文本中（而不是矩形坐标，这在下面解释），然后在服务器端将其转换回来，就这样。（但我不知道这有多高效/安全）。至少这解决了我与primefaces之间的问题，primefaces不想通过网络多次发送不必要的数据

1.首先，让我们在不将图像发送到服务器的情况下显示图像。 此时，当显示图像时，如果您检查img的src标记内部，您将看到它是图像的数据，如base 64：

src=“data:image/jpeg；base64，/9j/4AAQSkZJRgABAQEAAQABAAD/2wCEAAYEBQYFBAYGBQ

我们用java裁剪图像

---

将您的问题分解为可管理的部分。您知道可以向bean发送输入。接下来剩下的是如何读取图像并将其作为数据放入输入中（完全非jsf）@Kukeltje是的，我差不多完成了。我想在主要时间删除我的问题…不要，只是改进问题并创建一个答案yourself@Kukeltje是的，我的意思是在此期间，直到我完成，然后我发布一个答案并取消删除。这样人们就不会花时间思考它。我不知道。无论如何，我会在d之后有一个答案问题及其标题是否与答案相符？（标题一般为btw）

<p:fileUpload
    id="imgInp"
    mode="simple" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>

    <img id="blah" src="#" alt="your image" />
    <p:imageCropper image="" />

<script>
    var reader = new FileReader();
    reader.onload = function (e) {
        $('#blah').attr('src', e.target.result);
    }

       function readURL(input) {
            if (input.files &amp;&amp; input.files[0]) {
                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#imgInp").change(function(){
            readURL(this);
        });
</script>

<p:fileUpload
        mode="advanced" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
        fileUploadListener="#{bean.uploadPicListenner}"
        update="cropper"/>                  

<h:panelGroup id="cropper" >
    <p:imageCropper  image="#{bean.img}"/>
</h:panelGroup>

public void uploadPicListenner(FileUploadEvent e) {
    img = e.getFile();
    RequestContext.getCurrentInstance().update("ptform:cropper");
}

<h:form id="lolo"  enctype="multipart/form-data">

    <p:fileUpload
        value="#{adminCreateTeam.teamImg}"
        mode="simple" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
    <img id="blah" src="#" alt="your image" />

</h:form> 


<script>
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#blah').attr('src', e.target.result);
    }

   function readURL(input) {
        if (input.files &amp;&amp; input.files[0]) {
            reader.readAsDataURL(input.files[0]);      
        }
    }

    $("#lolo\\:imgInp").change(function(){
        readURL(this);
    });
</script>

<h:inputHidden value="#{adminCreateTeam.rect}"/>
<p:commandButton value="submit" action="#{adminCreateTeam.picTest}" ajax="false"/>

    // with this the hidden field is gonna be populated by the 
    // cropping rectangle data.
       var $imageCrop = $('#blah').cropper({
          aspectRatio: 1/1,
          viewMode: 1,
          crop: function(e) {
            // Output the result data for cropping image.
            // string with all the data delimited by /
            $('#lolo\\:hiddenB64').val(e.x + '/' + e.y + '/' + e.width + '/' + e.height);

          }
        });

 //So the image changes in the cropper when a new image is picked
    reader.onload = function (e) {
        $imageCrop.cropper('replace',e.target.result);  
    }

   public void picTest() {
    //getting coord.
    String data[] = rect.split("/");
    try (InputStream in = new ByteArrayInputStream(teamImg.getContents())) {
        BufferedImage bImageFromConvert = ImageIO.read(in);
        // line under this crops. It's possible there is a zoom to figure out, I didn't check yet. Seemed correct on first and only try. In any case you'll figure it out
        //  surely the parsing shouldn't be here but I need to sleep real bad.
        BufferedImage dest = bImageFromConvert.getSubimage((int)(Double.parseDouble(data[0])), (int)(Double.parseDouble(data[1])),
                (int)(Double.parseDouble(data[2])), (int)(Double.parseDouble(data[3])));
        // path to the folder
        Path folder = Paths.get(dirs.getString("imgTeams"));
        String filename = "team_pic";
        String extension = FilenameUtils.getExtension(teamImg.getFileName());
        Path file = Files.createTempFile(folder, filename + "-", "." + extension);
        ImageIO.write(dest, "jpeg", file.toFile());

    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }