Overview
Getting the camera to take photos on iPhone 6 Plus, in my Ionic Framework Application was causing memory issues since I was using the DestinationType.DATA_URL parameter to upload the images to Parse. The Parse Javascript File APIonly supports uploading images that way. The solution I found to use in an Ionic Framework mobile solution was to save the images to disk using destinationType.FILE_URI and then convert them to base 64 for uploading along with resizing them since these new phones take extremely hi resolution photos.
Getting Started
If you see this error
Then you will need to update the version of Cordova using the following command
cordova platform update android@5.0.0
Whitelist Issues With Parse
To address the issues, I have downloaded the version of the parse library and included it in the libfolder of the application. You will also need to update the Content-Security Policy in the index.html file. Please see code below
If you are new to Ionic Framework or need a refresher, the Getting Started Section of the website is a great resource
Install Image Resizer Plugin
Install the Actionsheet Plugin
cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-actionsheet
Install the Camera Plugin
The Code
We are using the camera plugin here, but I did not use Ionic Framework with ngCordova – Camera here for the sake of simplicity, I suspect you will get the same behavior if you are using the ngCordova – Camera module to access the camera.
When we get the picture back, we want to reduce the image for a thumbnail to display in maybe an Ionic Framework List Component. We need the reduced sized image to get an acceptable user experienced when the user is scrolling through a list. If you attempt to use the larger original image, it will work, but performance will be effected.
We are resizing the image with a width of 200px and the returned contents will be a base64 string that we can use to upload to Parse as the thumbnail
Using the same function as before but setting the resize to 99% we will get the full-sized image returned as a base64 string to upload.
Supporting File Uploads To Parse
What we are doing here is creating a parse object called ImageInfo to store the file reference and any additional information on the file we want to save.
First step is to create the parse file object using the base64 version of the file, then add the file object to the ImageInfo object and save that… All done!!
Full Source Code Available here on GitHub
Plugin Used with Ionic Framework Mobile Solution – when installing the Image Resizer plugin, be sure to use the forked version referenced in the link below. The README installation instructions in the repo references the original plugin, not the currently maintained forked
Comentarios