Setting up Pintura Image Editor with Cordova
To set up the editor with Cordova it's highly recommended to use the included Cordova preset project as a starting point or guideline. It includes an example loading images from camera, photo library, or local file URL.
For compatibility with Android and iOS we need to make the following changes to the default Cordova project.
On iOS we need to be able to read from the file protocol
To load files Pintura Image Editor needs the
cordova-plugin-wkwebview-file-xhr plugin, run the following command to add it to your project.
cordova plugin add https://github.com/oracle/cordova-plugin-wkwebview-file-xhr
The Content Security Policy needs to allow the Blob protocol
We need to add
img-src 'self' in the default CSP meta tag.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' blob: data: content:;" />
File access plugin corrections
If we need to use the
cordova-plugin-file plugin it's good to be aware that this plugin overwrites the browser native
Add the following script to backup native web APIs in the global object. The script is located in the
www/js/ directory of the Cordova preset project.
Pintura Image Editor will try to access the native API from the backup object before trying the native web API.
This script needs to run before the Cordova script is loaded.
Positioning of the editor modal
Depending on how our app is rendered we might have to reposition the editor modal. We can use the CSS custom properties described in the Modal layout entry in style docs to add some padding or limit the size.