× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Converting Large Images to Base64Strings in Ionic Framework

Aaron Saunders
Jul 12, 2015
<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.

comments powered by Disqus