Search code examples
javascriptcordovaandroid-cameracordova-pluginsfilereader

How to display an image captured with cordova-plugin-media-capture


I am using this plugin which has allowed me to capture an image with my Android phone.

Now how am I supposed to display the image just captured in my app? The following didn't work. It said: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."

function capturePhoto(){
    navigator.device.capture.captureImage(
        file=>{
            getBase64(file).then(b64=>{
                document.getElementById('fsPhotoI').src=b64;
            }).catch(e=>alert(e));
        },
        error=>{alert(error);},
        {limit:1}
    );
}

function getBase64(f) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(f);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}

Solution

  • I solved it:

    function capturePhoto(){
        navigator.device.capture.captureImage(
            file=>{
                document.getElementById('fsPhotoI').src=file[0].fullPath;
            },
            e=>{alert(JSON.stringify(e));},
            {limit:1}
        );
    }
    

    One thing I overlooked was that the 'file' variable returned is an array instead of a single file, even when only one image is captured.