Combine FilePond with Pintura and create the perfect image edit and upload experience.
The Image filter plugin adds filter information to the file in the form of a Color Matrix.
The Image preview plugin uses this information to show the correct preview. The Image transform plugin uses this information to transform the image before uploading it to the server.
npm i filepond-plugin-image-filter --save
Now we can add the Image Filter plugin to our project like this.
// Import FilePond
import * as FilePond from 'filepond';
// Import the plugin code
import FilePondPluginImageFilter from 'filepond-plugin-image-filter';
// Register the plugin
FilePond.registerPlugin(FilePondPluginImageFilter);
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-image-filter/dist/filepond-plugin-image-filter.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
// Register the plugin
FilePond.registerPlugin(FilePondPluginImageFilter);
// ... FilePond initialisation code here
</script>
<!-- add before </body> -->
<script src="filepond-plugin-image-filter.js"></script>
<script src="filepond.js"></script>
<script>
// Register the plugin
FilePond.registerPlugin(FilePondPluginImageFilter);
// ... FilePond initialisation code here
</script>
A Color Matrix is an array of 20 numbers, it represents a transformation to apply to each color in an image.
[ R, G, B, A, T,
R, G, B, A, T,
R, G, B, A, T,
R, G, B, A, T ]
An example grayscale Color Matrix.
const pond = FilePond.create(inputElement, {
imageFilterColorMatrix: [
0.299,
0.587,
0.114,
0,
0,
0.299,
0.587,
0.114,
0,
0,
0.299,
0.587,
0.114,
0,
0,
0.0,
0.0,
0.0,
1,
0,
],
});
Property | Default value | Description |
---|---|---|
allowImageFilter
|
| Enable or disable image filtering |
imageFilterColorMatrix
|
| The Color Matrix to apply to the image in the preview and transform phase. |