This package provides a JSF (Java Server Faces) component ImageEditor as addition to the commonly used PrimeFaces widget library.
Authors: Christian Simon <[email protected]>, Christian Ott <[email protected]>
Copyright: illucIT Software GmbH
URL: www.illucit.com
License: The Apache License, Version 2.0
Current Version: 3.0.0
ImageEditor is written for and tested with PrimeFaces 10.0 and JSF 2.3 (also backwards compatible to JSF 2.2). Due to changes in the PrimeFaces API for streamed data, the library is not compatible with earlier PrimeFaces versions without modifications.
In order to use the ImageEditor component with a specific PrimeFaces version, please see the compatibility table below:
| ImageEditor Version | PrimeFaces Version | Required Java Version |
|---|---|---|
| ImageEditor 3.0.0 | PrimeFaces 10.0 | Java 8+ |
| ImageEditor 2.2.0 | PrimeFaces 8.0 | Java 8+ |
| ImageEditor 2.1.0 | PrimeFaces 7.0 | Java 8+ |
| ImageEditor 2.0.0 | PrimeFaces 6.2 | Java 8+ |
There is an example project that shows the usage of the ImageEditor components: illucIT/primefaces-imageeditor-example
The ImageEditor component can either be downloaded directly on GitHub or included via Maven.
Then just add the Maven artifact to your dependencies:
<dependencies>
<dependency>
<groupId>com.illucit</groupId>
<artifactId>primefaces-imageeditor</artifactId>
<version>${version.imageeditor}</version>
</dependency>
<dependencies>
The library provides a taglib including the imageEditor component.
In order to use the component, first declare a namespace for the taglib in your JSF source file (where your also would include the namespace for PrimeFaces):
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
...
xmlns:p="http://primefaces.org/ui"
xmlns:ie="http://www.illucit.com/jsf/imageeditor">
Then you can use the imageEditor tag in your facelet file.
<ie:imageEditor id="exampleImageEditor" widgetVar="imageEd"
value="#{imageEditorBean.image}" initialColor="ffff00"
initialShape="ellipse"
fileUploadListener="#{imageEditorBean.onImageSaved}"
labelSave="Save" labelDownload="Download"
onsuccess="alert('Successfully saved!');">
<f:param name="fileName" value="#{imageEditorBean.fileName}" />
</ie:imageEditor>
The following parameters are required for the imageEditor component to work correctly:
value: Expression of a method returning aStreamedContentobject containing the image data. Every parameter child element of type<f:param />will be attached to the image request.
Note: As the image is requested by a normal GET request, no view scope can be used for this as the view id will not be transmitted.fileUploadListener: Bean method accepting anImageEditedEventobject. The method is called when the save button is pressed. The given object contains the binary image data.
If you want to use the ImageEditor component with another PrimeFaces version than the one in the dependency, you can exclude the PrimeFaces dependency via maven and provide your own. This is especially useful, if you have access to the PrimeFaces Elite releases, which contain additional fixes and features, but are compatible with the main branch.
<dependency>
<groupId>com.illucit</groupId>
<artifactId>primefaces-imageeditor</artifactId>
<version>${version.imageeditor}</version>
<exclusions>
<exclusion>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>${newer.primefaces.version}</version>
</dependency>
ImageEditor is free software and comes with NO WARRANTY!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent