Question

我的管理信息中心是在Spring上使用JSF 2.2 + Primefaces 5.3构建的。

我正在开发用于创建新实体的表单，其应该如下工作：

用户填写所有输入字段并上传图片（使用<p:fileUpload）。
然后，应刷新<p:imageCropper并显示要裁剪的上传图像。
用户裁剪图像，然后按提交按钮在磁盘上创建新实体并存储图像。

现在，我坚持了第2步。 <p:imageCropper不会显示上传的图片。

我怀疑是否有可能从托管bean的StreamedContent obj获取图像到<p:imageCropper图像属性，就像<p:graphicImage一样？

那么，请让我知道它是如何解决的？

这是我的表格：

<h:form prependId="false" id="createForm" enctype="multipart/form-data">
            <p:separator />
                <p:growl id="messages" showDetail="true" />
                <p:outputLabel value="Create card:" />
                <h:panelGrid columns="2" cellpadding="5">
                    <p:outputLabel value="Fill in Name:" for="cardName" />
                    <p:inputText id="cardName" value="#{cardController.name}"
                        required="false" requiredMessage="Please, enter new card Name" />
                    <p:outputLabel value="Fill in Description:" for="cardDescription" />
                    <p:inputTextarea id="cardDescription" rows="3" cols="33"
                        value="#{cardController.description}" />
                    <p:outputLabel value="Upload image:" for="cardImage" />
                    <p:fileUpload id="cardImage"
                        fileUploadListener="#{cardController.handleFileUpload}"
                        auto="false"
                        mode="advanced" dragDropSupport="false" update="messages cropped uploaded"
                        sizeLimit="100000" fileLimit="3"
                        allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

                    <p:outputLabel value="change size of the image:" for="cropped" />
                    <p:imageCropper id="cropped" value="#{cropperView.croppedImage}" image="#{cardController.image}" initialCoords="225,75,300,125"/>
                    <p:graphicImage id = "uploaded" value="#{cardController.image}"/>
                    <p:commandButton value="Create"
                        action="#{categoryController.create()}"
                        update=" createForm" />
                    <p:message for="cardName" />


                </h:panelGrid>
        </h:form>

控制器：

@Controller
@Scope("session")
public class CardController {

    private CroppedImage croppedImage;
    private UploadedFile uploadedFile;
    private String name;
    private String description;

    public void handleFileUpload(FileUploadEvent event) throws IOException {
        System.out.println("!!! inside file upload");
        FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, message);
        uploadedFile = event.getFile();

    }

    public StreamedContent getImage() {
        FacesContext context = FacesContext.getCurrentInstance();

        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            // So, we're rendering the HTML. Return a stub StreamedContent so that it will generate right URL.
            return new DefaultStreamedContent();
        }
        else {
            // So, browser is requesting the image. Return a real StreamedContent with the image bytes.
            return new DefaultStreamedContent(new ByteArrayInputStream(uploadedFile.getContents()));
        }
    }

    public void create() {
        // shoul be logic for creating new entities
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public CroppedImage getCroppedImage() {
        return croppedImage;
    }

    public void setCroppedImage(CroppedImage croppedImage) {
        this.croppedImage = croppedImage;
    }

    public UploadedFile getUploadedFile() {
        return uploadedFile;
    }

    public void setUploadedFile(UploadedFile uploadedFile) {
        this.uploadedFile = uploadedFile;
    }

}

Answer 1

所以，我用这种方式解决了我的问题：

上传图像后，将其存储在磁盘上的临时目录中。
更新<p:imageCropper所在的组件。 image的{{1}}属性应该等于上面创建的路径（例如：value =＆＃34; http：// localhost：8080 / temp /＃{bean.imageName}＆＃34;）。请注意，磁盘上的目录应该对您的Web容器可见（我的应用程序是基于Spring启动的，因此它使用嵌入式Tomcat。所以，我已经安装了额外的apache服务器并在那里保存我的图像。）
裁剪图像并将其存储在磁盘上。

以下是一些代码：

<p:imageCropper

控制器：

<p:fileUpload id="cardImage"
                    fileUploadListener="#{cardController.handleFileUpload}"
                    auto="true" mode="advanced" dragDropSupport="true"
                    update="messages cropped cropButton" sizeLimit="5000000"
                    allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
    <h:panelGrid columns="2" cellpadding="5" id="cropped">
                    <p:outputLabel value="Crop image:" for="cropper"
                        rendered="#{not empty cardController.imageFilePath}" />
                    <p:imageCropper id="cropper"
                        rendered="#{not empty cardController.imageFilePath}"
                        value="#{cardController.image}"
                        image="#{cardController.hostName}/#{cardController.imageFilePath}"
                        aspectRatio="1.0" initialCoords="225,75,300,125" minSize="210,210" />
                    <p:outputLabel value="Cropped image:" for="image"
                        rendered="#{not empty cardController.croppedImageFileName}" />
                    <p:graphicImage id="image"
                        rendered="#{not empty cardController.croppedImageFileName}"
                        value="#{cardController.hostName}/images/#{cardController.categoryId}/#{cardController.levelId}/#{cardController.croppedImageFileName}" />
                    <p:commandButton id="cropButton"
                        rendered="#{not empty cardController.uploadedFile}" value="Crop"
                        action="#{cardController.crop()}" update="messages cropped create"
                        icon="ui-icon-scissors" />
                    <p:commandButton value="Create" id="create"
                        rendered="#{not empty cardController.croppedImageFileName}"
                        action="#{cardController.create()}"
                        update=":cardForm:table createForm" />
                    <p:message for="cardName" />
                </h:panelGrid>

Primefaces，p：imageCropper无法在上传后显示图像

1 个答案: