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参数，它为null。

请注意，图像来自ImageServlet的帮助。

只是为了全面了解你。此片段是对话框的一部分，该对话框还使用h：inputFile jsf标记上传图像。上传部分工作正常。文件上传并以db [byte]的形式保存在db中。上传完成后，将设置标志并显示裁剪部分。

这里是整个对话框

<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方法后，我发现了以下内容。

第二次点击时调用该方法，第一次点击无效。我不得不将范围更改为sessionScope进行调试。我不知道为什么会发生这种情况以及第一次点击按钮会发生什么。任何修复？
ImageCropperRenderer用于处理存储在磁盘上的图像，而不是来自servlet的动态图像。这意味着我必须将图像存储在临时位置，以便图像裁剪器工作。我可能会考虑使用jCrop。这里有什么建议？

UPDATE-1

上面提到的第一个问题来自以下错误 https://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-790 我可以通过一种解决方法来解决这个问题，我可以在其中明确更新提交表单。
现在只剩下第二个问题，这意味着primefaces的图像裁剪器无法使用动态加载的图像（由servlet提供）。有任何想法吗？我也对jCrop等替代品持开放态度，并希望避免将图像保存在磁盘上。

Answer 1

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

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

Primefaces image cropper croppedImage null

1 个答案: