Primefaces 图像裁剪器 croppedImage null

Question

我在 Wildfly 8.2 下的 Java EE 7 jsf2.2 应用程序中使用 imageCropper。

<p:outputPanel id="cropDlg" rendered="#{profilePicController.fileUploaded}">
                    <h:form id="cropForm">

                        <p:messages/>
                        <p:panelGrid columns="3">
                            <p:row>
                                <p:column>

                                    <p:imageCropper value="#{profilePicController.croppedImage}"
                                                    image="/images?id=#{profilePicController.imageId}"
                                                    initialCoords="0,0,200,200"
                                            />


                                    <p:graphicImage id="cropped" value="/images?id=#{profilePicController.imageId}"/>
                                </p:column>
                                <p:column>
                                    <h:commandButton value="Crop" action="#{profilePicController.cropImage}">
                                        <f:ajax execute="@form" render="dlgContent"/>
                                    </h:commandButton>
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                    </h:form>
                </p:outputPanel>

现在，对话框正确显示了图像，我也可以调整图像大小，但是当我提交时，没有调用 action 方法，没有显示验证错误。如果我在命令按钮中写了 immediate="true"，则调用 action 方法但未设置croppedImage 参数，它为空。

请注意，图像在 ImageServlet 的帮助下来自数据库。

只是为了给你完整的画面。这个 sn-p 是一个对话框的一部分，它也使用 h:inputFile jsf 标记上传图像。上传部分工作正常。该文件被上传并以 byte[] 的形式保存在数据库中。上传完成后，设置标志并显示裁剪部分。

这里是整个对话框

<p:dialog id="imgUploadDlg" widgetVar="imgUpload" header="Upload file">
            <p:panel id="dlgContent">
                <p:outputPanel rendered="#{!profilePicController.fileUploaded}">
                    <h:form id="uploadForm" enctype="multipart/form-data">
                        <p:messages/>
                        <p:panelGrid columns="3">
                            <p:row>
                                <p:column>
                                    <h:outputText value="Upload File"/>
                                </p:column>
                                <p:column>
                                    <h:inputFile id="imageFile" value="#{profilePicController.imagePart}"/>
                                    <h:commandButton value="Upload" action="#{profilePicController.uploadFile}">
                                        <f:ajax execute="@form" render="dlgContent"/>
                                    </h:commandButton>
                                </p:column>
                                <p:column>
                                    <p:panel id="sampleImg">
                                        <ui:param name="servletPath"
                                                  value="/images?id=#{profilePicController.imageId}"/>
                                        <h:graphicImage
                                                value="#{profilePicController.foundProfileImage ? servletPath : '/resources/images/profilepic.png'}"/>
                                    </p:panel>
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                    </h:form>
                </p:outputPanel>
                <p:outputPanel id="cropDlg" rendered="#{profilePicController.fileUploaded}">
                    <h:form id="cropForm">

                        <p:messages/>
                        <p:panelGrid columns="3">
                            <p:row>
                                <p:column>

                                    <p:imageCropper value="#{profilePicController.croppedImage}"
                                                    image="/images?id=#{profilePicController.imageId}"
                                                    initialCoords="0,0,200,200"
                                            />


                                    <p:graphicImage id="cropped" value="/images?id=#{profilePicController.imageId}"/>
                                </p:column>
                                <p:column>
                                    <h:commandButton value="Crop" action="#{profilePicController.cropImage}">
                                        <f:ajax execute="@form" render="dlgContent"/>
                                    </h:commandButton>
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                    </h:form>
                </p:outputPanel>
            </p:panel>
        </p:dialog>

UPDATE-0

在调试 ImageCropperRenderer::getConvertedValue 方法后，我发现如下。

1. 在第二次单击时调用该方法，第一次单击没有任何效果。我不得不将范围更改为 sessionScope 以进行调试。我不知道为什么会发生这种情况以及第一次单击按钮时会发生什么。任何修复？

2. ImageCropperRenderer 旨在处理存储在磁盘上的图像，而不是来自 servlet 的动态图像。这意味着我必须将图像存储在一个临时位置，以便图像裁剪器工作。我可能会考虑改用 jCrop。这里有什么建议吗？

UPDATE-1

1. 上面提到的第一个问题来自以下错误 https://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-790 我可以通过一种解决方法来解决此问题，在该解决方法中，我在提交时明确更新表单。

2. 现在只剩下第二个问题，这意味着 primefaces 的图像裁剪器无法处理动态加载的图像（由 servlet 提供服务）。有任何想法吗 ？我也对 jCrop 等替代方案持开放态度，并希望避免将图像保存在磁盘上。

Answer 1

最后我放弃了 primefaces Image Cropper 并使用 jCrop (http://deepliquid.com/content/Jcrop.html) 和 Java 2d 图形来实际裁剪和调整图像大小。奇怪的是，对于这样一个常见的用例，JSF 世界几乎没有可能性。

请注意，所有问题都是由于上传和裁剪是在 ajax 对话框中完成的。对于非 ajax 版本，Image Cropper (primefaces) 可以工作。