[GitHub] [cordova-plugin-camera] skaparate commented on issue #475: On Browser, camera.getPicture({DestinationType.FILE_URI}) returns base64image data

[GitBox <gi...@apache.org>]

skaparate commented on issue #475: On Browser, camera.getPicture({DestinationType.FILE_URI}) returns base64image data
URL: https://github.com/apache/cordova-plugin-camera/issues/475#issuecomment-518849532
 
 
   Hi!
   
   You may know it by now, but this is the [default behavior when using the browser](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html#browser-quirks).
   
   In case it helps someone else I'll leave this code, which will allow the user to take a picture or select it from the gallery, and return an image object with the following (**requires** the [cordova-plugin-device)](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/index.html):
   
   - data: the actual data returned by the plugin (a base64 string or a path),
   - name: just the date and time (I used this to test on the browser),
   - type: a string with a value of either 'file' or 'base64'
   
   `var defaultOptions = {
     quality: 100,
     correctOrientation: true,
     saveToPhotoAlbum: true
   };
   
   /**
    * Creates a custom object with the image data.
    * 
    * @param {String} imgUri The base64 data or a path, depending
    * on the platform.
    */
   function createImageObject(imgUri) {
     var img = {
       data: '',
       type: 'file',
       name: ''
     };
   
     if (device.platform.toLowerCase().trim() === 'browser') {
       img.data = 'data:image/';
       img.type = 'base64';
   
       if (navigator.camera.EncodingType === 1) {
         img.data += 'png;';
       } else {
         img.data += 'jpeg;';
       }
   
       img.data += 'base64,';
     }
   
     img.data += imgUri;
     // For testing, mostly, since the actual file name will have
     // the date and time.
     img.name = new Date().toUTCString();
     return img;
   }
   
   /**
    * 
    * @param {Object} options The navigator.camera options.
    * @param {Function} done Called once the image is taken
    * or selected. Receives two parameters: error and imgObject.
    * The first one is only present if there was an error.
    */
   function doPictureAction(options, done) {
     if (navigator.camera) {
       navigator.camera.getPicture(function(imgUri) {
         var imgObject = createImageObject(imgUri);
         done(null, imgObject);
       }, function(error) {
         console.error('Failed to take or select a picture', error);
         done(error, null);
       }, options);
     }
   }
   
   /**
    * Selects a picture from the image gallery.
    * 
    * @param {Function} done Called once the picture has been
    * selected from the gallery.
    */
   function selectPicture(done) {
     var camOptions = $.extend({
       sourceType: 0
     }, defaultOptions);
     console.debug('Trying to select a picture');
     doPictureAction(camOptions, done);
   }
   
   /**
    * Takes a picture using the camera.
    * 
    * @param {Function} callback Called once the picture has been taken.
    * @param {Function} extraOptionsFn Function to add extra camera options.
    */
   function takePicture(callback, extraOptionsFn) {
     var camOptions = $.extend({}, defaultOptions);
   
     if (extraOptionsFn) {
       camOptions = extraOptionsFn(camOptions);
     }
     console.debug('Trying to take a picture');
     doPictureAction(camOptions, function(error, imgObject) {
       callback(error, imgObject);
     });
   }`
   
   Usage:
   
   `function onPictureResult(error, imageObject) {
     if (!error) {
       if (imageObject.type === 'base64') {
         // Convert to blob to upload through a FormData object or
         // just put it into an img.src attribute
       } else {
         // Load the file using the cordova-plugin-file to upload or
         // simply put the path into an img.src attribute
       }
     }
   }
   
   // To take a picture:
   takePicture(onPictureResult);
   
   // To select a picture
   selectPicture(onPictureResult)`

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org