Pintura Image Editor v8.78.1

Setting up Pintura Image Editor with Cordova

To set up the editor with Cordova it's highly recommended to use the Cordova example project as a starting point or guideline.

It includes an example loading images from camera, photo library, or local file URL, as well as changes required to make the editor function in the environment.

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 blob: after 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 File, FileReader, and ProgressEvent APIs.

See GitHub issue #316 for details

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.

<script src="js/pqina-backup-webapi.js"></script>

Loading JavaScript modules on iOS

If you want to use the JavaScript module version of the library on iOS you need to set the "Scheme" preference to "app" in the config.xml file.

<preference name="Scheme" value="app" />

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.

Next steps