ImageCropper can work tightly with FileUpload handling images on the fly.
<div class="card">
<h:form>
<p:growl id="messages" showDetail="true"/>
<p:fileUpload mode="advanced"
multiple="false"
sizeLimit="102400" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
invalidSizeMessage="Maximum file size allowed is 100 KB"
invalidFileMessage="only gif | jpg | jpeg | png is allowed"
update="messages cropperPanel"
listener="#{cropUploaderBean.handleFileUpload}"/>
<p:outputPanel id="cropperPanel">
<h:panelGrid columns="1" rendered="#{not empty cropUploaderBean.originalImageFile}">
<p:commandButton value="Crop"
action="#{cropUploaderBean.crop}"
update="cropped messages" styleClass="p-my-3"/>
<h:panelGrid columns="2" cellpadding="7">
<p:imageCropper
value="#{cropUploaderBean.croppedImage}"
id="imageCropper" cache="false"
image="#{cropUploaderBean.image}"
initialCoords="50,50,150,100"
minSize="50,50" maxSize="350,350"/>
<p:outputPanel id="cropped">
<p:graphicImage cache="false"
rendered="#{not empty cropUploaderBean.croppedImage}"
value="#{cropUploaderBean.cropped}"/>
</p:outputPanel>
</h:panelGrid>
</h:panelGrid>
</p:outputPanel>
</h:form>
</div>
@Named
@SessionScoped
public class CropUploaderBean implements Serializable {
private CroppedImage croppedImage;
private UploadedFile originalImageFile;
public CroppedImage getCroppedImage() {
return croppedImage;
}
public void setCroppedImage(CroppedImage croppedImage) {
this.croppedImage = croppedImage;
}
public UploadedFile getOriginalImageFile() {
return originalImageFile;
}
public void handleFileUpload(FileUploadEvent event) {
this.originalImageFile = null;
this.croppedImage = null;
UploadedFile file = event.getFile();
if(file != null && file.getContent() != null && file.getContent().length > 0 && file.getFileName() != null) {
this.originalImageFile = file;
FacesMessage msg = new FacesMessage("Successful", this.originalImageFile.getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
public void crop() {
if(this.croppedImage == null || this.croppedImage.getBytes() == null || this.croppedImage.getBytes().length == 0) {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error", "Cropping failed."));
}
else {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Success", "Cropped successfully."));
}
}
public StreamedContent getImage() {
FacesContext context = FacesContext.getCurrentInstance();
StreamedContent result = null;
if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE || this.originalImageFile == null
|| this.originalImageFile.getContent() == null || this.originalImageFile.getContent().length == 0) {
result = new DefaultStreamedContent();
}
else {
result = DefaultStreamedContent.builder().contentType(this.originalImageFile.getContentType()).stream(() -> {
try {
return new ByteArrayInputStream(this.originalImageFile.getContent());
} catch (Exception e) {
e.printStackTrace();
return null;
}
}).build();
}
return result;
}
public StreamedContent getCropped() {
FacesContext context = FacesContext.getCurrentInstance();
StreamedContent result = null;
if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE || this.croppedImage == null
|| this.croppedImage.getBytes() == null || this.croppedImage.getBytes().length == 0) {
result = new DefaultStreamedContent();
}
else {
result = DefaultStreamedContent.builder().contentType(this.originalImageFile.getContentType()).stream(() -> {
try {
return new ByteArrayInputStream(this.croppedImage.getBytes());
} catch (Exception e) {
e.printStackTrace();
return null;
}
}).build();
}
return result;
}
}