Cordova takePhoto is not working

Question

I'm developing an app that will take photos and I'm learning with Cordova. I used this js:

var takePhoto = function() {
    navigator.camera.getPicture(onSuccess, onError, { quality: 30,
        destinationType: Camera.destinationType.FILE_URI,
        saveToPhotoAlbum: true,
        targetWidth: 1500,
        targetHeight: 1500
    });

    function onSuccess(imageData) {
        $('.photoPreview').show();
        var image = document.getElementById('photoSrc');
        image.src = "data:image/jpeg;base64," + imageData;
        photoData = imageData;
        $('#photoMessage').html('');
    }

    function onError(message) {
    }
}

Whenever I click the button, it's not working and nothing happens. Same happens with the function I have used to select existing photo:

var selectPhoto = function() {
    navigator.camera.getPicture(onSuccess, onFail, { quality: 30,
        destinationType: Camera.destinationType.FILE_URI,
        sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
        targetWidth: 1500,
        targetHeight: 1500
    });

    function onSuccess(imageData) {
        $('.photoPreview').show();
        var image = document.getElementById('photoSrc');
        image.src = "data:image/jpeg;base64," + imageData;
        photoData = imageData;
        $('#photoMessage').html('');
    }

    function onFail(message) {
    }
}

and to add info to that I'm using this

$('#selectPhoto').on('click', function() {
    selectPhoto();
});

$('#takePhoto').on('click', function() {
    takePhoto();
});

and this HTML

 <button id="selectPhoto" class="photo-button">Select Existing Photo</button>
 <button id="takePhoto" class="photo-button">Take New Photo</button>

I'm using the latest Cordova 6.4.0, [email protected] and latest cordova-plugin-camera from https://github.com/apache/cordova-plugin-camera

Please let me know what I should do. Thank you!

Answer 1

It looks like you're taking the returned imageData and injecting it directly into the DOM as base64 data. That would work fine, if you changed the camera options to return base 64 using DATA_URL as the option. In summary:

navigator.camera.getPicture(onSuccess, onError, { quality: 30,
    destinationType: Camera.destinationType.DATA_URL,
    saveToPhotoAlbum: true,
    targetWidth: 1500,
    targetHeight: 1500
});

instead of:

navigator.camera.getPicture(onSuccess, onError, { quality: 30,
    destinationType: Camera.destinationType.FILE_URI,
    saveToPhotoAlbum: true,
    targetWidth: 1500,
    targetHeight: 1500
});

EDIT: Jaze has uncovered the real reason, that "destinationType" needs to be capitalized. It's easy to miss! See below for the correct solution:

navigator.camera.getPicture(onSuccess, onError, { quality: 30,
    destinationType: Camera.DestinationType.DATA_URL,
    saveToPhotoAlbum: true,
    targetWidth: 1500,
    targetHeight: 1500
});