Ionic native camera.getPicture(options) always returns a string

Multi tool use
Multi tool use












2















I am using the getPicture function from @ionic-native/camera to get the file URI of the image. I have the cordova camera plugin and all the packages are updated. According to the documentation the default destination type option is File_URI. However, even when I explicitly specify my options with my default destination type as File_URI it returns a base64 string.



The source code is given below, am I missing something? Any help is appreciated.



import { Camera, CameraOptions } from '@ionic-native/camera';




    openGallery(){
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}

this.camera.getPicture(options).then((imageURI) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):

this.image_loc = imageURI;

console.log("The image location is as follows: " + this.image_loc);

}, (err) => {
// Handle error
});
}


Output in console:



enter image description here










share|improve this question

























  • Having the same issue right now

    – ntgCleaner
    Feb 7 at 17:20
















2















I am using the getPicture function from @ionic-native/camera to get the file URI of the image. I have the cordova camera plugin and all the packages are updated. According to the documentation the default destination type option is File_URI. However, even when I explicitly specify my options with my default destination type as File_URI it returns a base64 string.



The source code is given below, am I missing something? Any help is appreciated.



import { Camera, CameraOptions } from '@ionic-native/camera';




    openGallery(){
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}

this.camera.getPicture(options).then((imageURI) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):

this.image_loc = imageURI;

console.log("The image location is as follows: " + this.image_loc);

}, (err) => {
// Handle error
});
}


Output in console:



enter image description here










share|improve this question

























  • Having the same issue right now

    – ntgCleaner
    Feb 7 at 17:20














2












2








2








I am using the getPicture function from @ionic-native/camera to get the file URI of the image. I have the cordova camera plugin and all the packages are updated. According to the documentation the default destination type option is File_URI. However, even when I explicitly specify my options with my default destination type as File_URI it returns a base64 string.



The source code is given below, am I missing something? Any help is appreciated.



import { Camera, CameraOptions } from '@ionic-native/camera';




    openGallery(){
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}

this.camera.getPicture(options).then((imageURI) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):

this.image_loc = imageURI;

console.log("The image location is as follows: " + this.image_loc);

}, (err) => {
// Handle error
});
}


Output in console:



enter image description here










share|improve this question
















I am using the getPicture function from @ionic-native/camera to get the file URI of the image. I have the cordova camera plugin and all the packages are updated. According to the documentation the default destination type option is File_URI. However, even when I explicitly specify my options with my default destination type as File_URI it returns a base64 string.



The source code is given below, am I missing something? Any help is appreciated.



import { Camera, CameraOptions } from '@ionic-native/camera';




    openGallery(){
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}

this.camera.getPicture(options).then((imageURI) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):

this.image_loc = imageURI;

console.log("The image location is as follows: " + this.image_loc);

}, (err) => {
// Handle error
});
}


Output in console:



enter image description here







ionic-framework ionic3 cordova-plugins ionic-native






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 9:10









Phonolog

3,80631944




3,80631944










asked Jan 2 at 20:15









GhostGhost

515




515













  • Having the same issue right now

    – ntgCleaner
    Feb 7 at 17:20



















  • Having the same issue right now

    – ntgCleaner
    Feb 7 at 17:20

















Having the same issue right now

– ntgCleaner
Feb 7 at 17:20





Having the same issue right now

– ntgCleaner
Feb 7 at 17:20












2 Answers
2






active

oldest

votes


















1














Try this Code:



  const options: CameraOptions = {
quality: 80,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
console.log(imageData);
}, (err) => {
// Handle error
});





share|improve this answer


























  • You can Change PHOTOLIBRARY to CAMERA according to your need.

    – Najam us saqib
    Jan 3 at 9:17











  • Thank you Najam, but I don't see the difference between my code and the one you have provided. You see, in your case imageData is supposed to provide a URI. This is what I expected with my imageURI variable, however, it seems to return a base64 string always, no matter what the destination type.

    – Ghost
    Jan 4 at 7:02



















0














try this



 base64Image:any;

optionsCamera: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.PNG,
cameraDirection: this.camera.Direction.BACK,
targetHeight:400,
targetWidth: 400,
correctOrientation: true,
allowEdit: true

}


this.camera.getPicture(options).then((imageData) => {

this.base64Image = imageData;
this.convertToUrl(imageData);

}, (err) => {
// console.log(err);

});


convertToUrl(newImage){
function toDataURL(ctx, callback) {
var url = ctx.base64Image;

var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
ctx.base64Image = reader.result;
callback(reader.result);
}
reader.readAsDataURL(xhr.response);

};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}

toDataURL(this, function(dataUrl) {
console.log(dataUrl)
})


}





share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54012585%2fionic-native-camera-getpictureoptions-always-returns-a-string%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    Try this Code:



      const options: CameraOptions = {
    quality: 80,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }
    this.camera.getPicture(options).then((imageData) => {
    // imageData is either a base64 encoded string or a file URI
    // If it's base64 (DATA_URL):
    console.log(imageData);
    }, (err) => {
    // Handle error
    });





    share|improve this answer


























    • You can Change PHOTOLIBRARY to CAMERA according to your need.

      – Najam us saqib
      Jan 3 at 9:17











    • Thank you Najam, but I don't see the difference between my code and the one you have provided. You see, in your case imageData is supposed to provide a URI. This is what I expected with my imageURI variable, however, it seems to return a base64 string always, no matter what the destination type.

      – Ghost
      Jan 4 at 7:02
















    1














    Try this Code:



      const options: CameraOptions = {
    quality: 80,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }
    this.camera.getPicture(options).then((imageData) => {
    // imageData is either a base64 encoded string or a file URI
    // If it's base64 (DATA_URL):
    console.log(imageData);
    }, (err) => {
    // Handle error
    });





    share|improve this answer


























    • You can Change PHOTOLIBRARY to CAMERA according to your need.

      – Najam us saqib
      Jan 3 at 9:17











    • Thank you Najam, but I don't see the difference between my code and the one you have provided. You see, in your case imageData is supposed to provide a URI. This is what I expected with my imageURI variable, however, it seems to return a base64 string always, no matter what the destination type.

      – Ghost
      Jan 4 at 7:02














    1












    1








    1







    Try this Code:



      const options: CameraOptions = {
    quality: 80,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }
    this.camera.getPicture(options).then((imageData) => {
    // imageData is either a base64 encoded string or a file URI
    // If it's base64 (DATA_URL):
    console.log(imageData);
    }, (err) => {
    // Handle error
    });





    share|improve this answer















    Try this Code:



      const options: CameraOptions = {
    quality: 80,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }
    this.camera.getPicture(options).then((imageData) => {
    // imageData is either a base64 encoded string or a file URI
    // If it's base64 (DATA_URL):
    console.log(imageData);
    }, (err) => {
    // Handle error
    });






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Jan 4 at 8:08









    rjv

    3,22012045




    3,22012045










    answered Jan 3 at 9:16









    Najam us saqibNajam us saqib

    679615




    679615













    • You can Change PHOTOLIBRARY to CAMERA according to your need.

      – Najam us saqib
      Jan 3 at 9:17











    • Thank you Najam, but I don't see the difference between my code and the one you have provided. You see, in your case imageData is supposed to provide a URI. This is what I expected with my imageURI variable, however, it seems to return a base64 string always, no matter what the destination type.

      – Ghost
      Jan 4 at 7:02



















    • You can Change PHOTOLIBRARY to CAMERA according to your need.

      – Najam us saqib
      Jan 3 at 9:17











    • Thank you Najam, but I don't see the difference between my code and the one you have provided. You see, in your case imageData is supposed to provide a URI. This is what I expected with my imageURI variable, however, it seems to return a base64 string always, no matter what the destination type.

      – Ghost
      Jan 4 at 7:02

















    You can Change PHOTOLIBRARY to CAMERA according to your need.

    – Najam us saqib
    Jan 3 at 9:17





    You can Change PHOTOLIBRARY to CAMERA according to your need.

    – Najam us saqib
    Jan 3 at 9:17













    Thank you Najam, but I don't see the difference between my code and the one you have provided. You see, in your case imageData is supposed to provide a URI. This is what I expected with my imageURI variable, however, it seems to return a base64 string always, no matter what the destination type.

    – Ghost
    Jan 4 at 7:02





    Thank you Najam, but I don't see the difference between my code and the one you have provided. You see, in your case imageData is supposed to provide a URI. This is what I expected with my imageURI variable, however, it seems to return a base64 string always, no matter what the destination type.

    – Ghost
    Jan 4 at 7:02













    0














    try this



     base64Image:any;

    optionsCamera: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.PNG,
    cameraDirection: this.camera.Direction.BACK,
    targetHeight:400,
    targetWidth: 400,
    correctOrientation: true,
    allowEdit: true

    }


    this.camera.getPicture(options).then((imageData) => {

    this.base64Image = imageData;
    this.convertToUrl(imageData);

    }, (err) => {
    // console.log(err);

    });


    convertToUrl(newImage){
    function toDataURL(ctx, callback) {
    var url = ctx.base64Image;

    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
    ctx.base64Image = reader.result;
    callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);

    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
    }

    toDataURL(this, function(dataUrl) {
    console.log(dataUrl)
    })


    }





    share|improve this answer




























      0














      try this



       base64Image:any;

      optionsCamera: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.PNG,
      cameraDirection: this.camera.Direction.BACK,
      targetHeight:400,
      targetWidth: 400,
      correctOrientation: true,
      allowEdit: true

      }


      this.camera.getPicture(options).then((imageData) => {

      this.base64Image = imageData;
      this.convertToUrl(imageData);

      }, (err) => {
      // console.log(err);

      });


      convertToUrl(newImage){
      function toDataURL(ctx, callback) {
      var url = ctx.base64Image;

      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
      var reader = new FileReader();
      reader.onloadend = function() {
      ctx.base64Image = reader.result;
      callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);

      };
      xhr.open('GET', url);
      xhr.responseType = 'blob';
      xhr.send();
      }

      toDataURL(this, function(dataUrl) {
      console.log(dataUrl)
      })


      }





      share|improve this answer


























        0












        0








        0







        try this



         base64Image:any;

        optionsCamera: CameraOptions = {
        quality: 100,
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.PNG,
        cameraDirection: this.camera.Direction.BACK,
        targetHeight:400,
        targetWidth: 400,
        correctOrientation: true,
        allowEdit: true

        }


        this.camera.getPicture(options).then((imageData) => {

        this.base64Image = imageData;
        this.convertToUrl(imageData);

        }, (err) => {
        // console.log(err);

        });


        convertToUrl(newImage){
        function toDataURL(ctx, callback) {
        var url = ctx.base64Image;

        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
        ctx.base64Image = reader.result;
        callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);

        };
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
        }

        toDataURL(this, function(dataUrl) {
        console.log(dataUrl)
        })


        }





        share|improve this answer













        try this



         base64Image:any;

        optionsCamera: CameraOptions = {
        quality: 100,
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.PNG,
        cameraDirection: this.camera.Direction.BACK,
        targetHeight:400,
        targetWidth: 400,
        correctOrientation: true,
        allowEdit: true

        }


        this.camera.getPicture(options).then((imageData) => {

        this.base64Image = imageData;
        this.convertToUrl(imageData);

        }, (err) => {
        // console.log(err);

        });


        convertToUrl(newImage){
        function toDataURL(ctx, callback) {
        var url = ctx.base64Image;

        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
        ctx.base64Image = reader.result;
        callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);

        };
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
        }

        toDataURL(this, function(dataUrl) {
        console.log(dataUrl)
        })


        }






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 8 at 12:16









        Kevin DiasKevin Dias

        465415




        465415






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54012585%2fionic-native-camera-getpictureoptions-always-returns-a-string%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            ulmoMXld vv5VLna7uKeSbVnZOP186zNMnQebd,xtdvmR
            q26cOtdQK0tTvhkcupH28YwKiX,9cqkiK4tXtW,UY71VppYdFeSQZbVtN3HY0i,kVu6bXCCMa7ScT3gn20h6LTwQm4nfiTl

            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas