1
管理ダッシュボードはJSF 2.2 + Primefaces 5.3で作成されました。 （<p:fileUploadを使用して）Primefaces、p：アップロード後にimageCropperが画像を表示できませんでした
- ユーザーが画像をすべての入力フィールドに記入し、アップロードします。
は、私は次のように動作するはずの新しいエンティティを作成するためのフォームを開発しています。
- 次に、
<p:imageCropperをリフレッシュして、アップロードされた画像をトリミングして表示する必要があります。 - ユーザーは画像を切り取り、送信ボタンを押して新しいエンティティを作成し、ディスクに画像を保存します。
今、私は2ステップで立ち往生しました。アップロードした画像は<p:imageCropperで表示されません。
<p:graphicImageのように、マネージドBeanからStreamedContent objのイメージ属性<p:imageCropperにイメージを取得できるかどうか疑問がありますか？
どうすれば解決できるのか教えてください。ここで
は私のフォームです：
<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;
}
}
@BalusC：こんにちは、高速応答に感謝。カスタムViewScopeを使用すると、 '
@BalusC： '
@BalusC：前回のコメントを更新：2つの別々のHTTPリクエストで