<p>Was having issues with the cordova camera plugin and iphone 6 plus where the memory was causing issue when using data_url with base64 strings for manipulating images.</p>
<p>We are using base64 images because of the integration with the <a href="https://parse.com/docs/js/api/symbols/Parse.File.html#constructor">Parse File Object on the Javascript API.</a></p>
<p>To address the memory issues related to the DATA_URL approach we now save the image to the file system and use a plugin to convert the file to a base64 string object for uploading to Parse. We also use the same plugin to resize the image to a more approproate resolution for optimizing the user experience when saving the file</p>
<p> </p>
<p>I have used the <a href="https://github.com/timkalinowski/PhoneGap-Image-Resizer">PhoneGap-Image-Resizer Plugin</a> to convert the photo from the data file to a base64 string for a thumbnail image and then used the same plugin to convert the data file to a base64 String to save in parse</p>
<pre><span style="color:rgb(150, 152, 150)">/**</span>
<span style="color:rgb(150, 152, 150)"> *</span>
<span style="color:rgb(150, 152, 150)"> * <span style="color:rgb(167, 29, 93)">@param</span> img_path</span>
<span style="color:rgb(150, 152, 150)"> * <span style="color:rgb(167, 29, 93)">@returns</span> {*}</span>
<span style="color:rgb(150, 152, 150)"> */</span>
<span style="color:rgb(121, 93, 163)">resizeImage</span><span style="color:rgb(167, 29, 93)">:</span> <span style="color:rgb(167, 29, 93)">function</span> (img_path) {
<span style="color:rgb(167, 29, 93)">var</span> q <span style="color:rgb(167, 29, 93)">=</span> $q.<span style="color:rgb(0, 134, 179)">defer</span>();
<span style="color:rgb(0, 134, 179)">window</span>.imageResizer.resizeImage(<span style="color:rgb(167, 29, 93)">function</span> (success_resp) {
<span style="color:rgb(121, 93, 163)">console</span><span style="color:rgb(0, 134, 179)">.log</span>(<span style="color:rgb(24, 54, 145)">'success, img re-size: '</span> <span style="color:rgb(167, 29, 93)">+</span> <span style="color:rgb(0, 134, 179)">JSON</span>.stringify(success_resp));
q.resolve(success_resp);
}, <span style="color:rgb(167, 29, 93)">function</span> (fail_resp) {
<span style="color:rgb(121, 93, 163)">console</span><span style="color:rgb(0, 134, 179)">.log</span>(<span style="color:rgb(24, 54, 145)">'fail, img re-size: '</span> <span style="color:rgb(167, 29, 93)">+</span> <span style="color:rgb(0, 134, 179)">JSON</span>.stringify(fail_resp));
q.reject(fail_resp);
}, img_path, <span style="color:rgb(0, 134, 179)">200</span>, <span style="color:rgb(0, 134, 179)">0</span>, {
imageDataType<span style="color:rgb(167, 29, 93)">:</span> ImageResizer.IMAGE_DATA_TYPE_URL,
resizeType<span style="color:rgb(167, 29, 93)">:</span> ImageResizer.RESIZE_TYPE_MIN_PIXEL,
pixelDensity<span style="color:rgb(167, 29, 93)">:</span> <span style="color:rgb(0, 134, 179)">true</span>,
storeImage<span style="color:rgb(167, 29, 93)">:</span> <span style="color:rgb(0, 134, 179)">false</span>,
photoAlbum<span style="color:rgb(167, 29, 93)">:</span> <span style="color:rgb(0, 134, 179)">false</span>,
format<span style="color:rgb(167, 29, 93)">:</span> <span style="color:rgb(24, 54, 145)">'jpg'</span>
});
<span style="color:rgb(167, 29, 93)">return</span> q.promise;
},
<span style="color:rgb(150, 152, 150)">/**</span>
<span style="color:rgb(150, 152, 150)"> * converts data file to string by resizing the image using 100% resize factor</span>
<span style="color:rgb(150, 152, 150)"> * </span>
<span style="color:rgb(150, 152, 150)"> * <span style="color:rgb(167, 29, 93)">@param</span> img_path</span>
<span style="color:rgb(150, 152, 150)"> * <span style="color:rgb(167, 29, 93)">@returns</span> {*}</span>
<span style="color:rgb(150, 152, 150)"> */</span>
<span style="color:rgb(121, 93, 163)">toBase64Image</span><span style="color:rgb(167, 29, 93)">:</span> <span style="color:rgb(167, 29, 93)">function</span> (img_path) {
<span style="color:rgb(167, 29, 93)">var</span> q <span style="color:rgb(167, 29, 93)">=</span> $q.<span style="color:rgb(0, 134, 179)">defer</span>();
<span style="color:rgb(0, 134, 179)">window</span>.imageResizer.resizeImage(<span style="color:rgb(167, 29, 93)">function</span> (success_resp) {
<span style="color:rgb(121, 93, 163)">console</span><span style="color:rgb(0, 134, 179)">.log</span>(<span style="color:rgb(24, 54, 145)">'success, img toBase64Image: '</span> <span style="color:rgb(167, 29, 93)">+</span> <span style="color:rgb(0, 134, 179)">JSON</span>.stringify(success_resp));
q.resolve(success_resp);
}, <span style="color:rgb(167, 29, 93)">function</span> (fail_resp) {
<span style="color:rgb(121, 93, 163)">console</span><span style="color:rgb(0, 134, 179)">.log</span>(<span style="color:rgb(24, 54, 145)">'fail, img toBase64Image: '</span> <span style="color:rgb(167, 29, 93)">+</span> <span style="color:rgb(0, 134, 179)">JSON</span>.stringify(fail_resp));
q.reject(fail_resp);
}, img_path, <span style="color:rgb(0, 134, 179)">1</span>, <span style="color:rgb(0, 134, 179)">1</span>, {
imageDataType<span style="color:rgb(167, 29, 93)">:</span> ImageResizer.IMAGE_DATA_TYPE_URL,
resizeType<span style="color:rgb(167, 29, 93)">:</span> ImageResizer.RESIZE_TYPE_FACTOR,
format<span style="color:rgb(167, 29, 93)">:</span> <span style="color:rgb(24, 54, 145)">'jpg'</span>
});
<span style="color:rgb(167, 29, 93)">return</span> q.promise;
}</pre>
<p>See <a href="https://github.com/timkalinowski/PhoneGap-Image-Resizer">PhoneGap-Image-Resizer Plugin</a> for additional information on the parameters</p>
Get New Tutorials Delivered to Your Inbox
New tutorials will be sent to your Inbox once a week.
