Instructions for showcasing an image taken using cordova-plugin-media-capture

I recently implemented this specific plugin in my project which allows me to easily capture images using my Android device.

However, I'm encountering some difficulties when trying to display the images that are captured within my app. After attempting a certain method, an error message was displayed: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."

function takePicture(){
    navigator.device.capture.captureImage(
        img=>{
            convertToBase64(img).then(b64=>{
                document.getElementById('fsPhotoI').src=b64;
            }).catch(e=>alert(e));
        },
        err=>{alert(err);},
        {limit:1}
    );
}

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

Answer №1

Successfully resolved:

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

An important detail I missed was that the 'img' variable returned is actually an array even when only one image is taken.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging ES6 with jQuery in Symfony 4

Currently working on a simple app using Symfony 4 and trying to add custom triggers in JavaScript. Having trouble getting my additional code to work as expected, even though it's compiled by Webpack via encore. It seems like my event is not triggering ...

Using jQuery to load content with a dynamic variable instead of specific element IDs

I am facing a minor jQuery issue. I am trying to load a specific area of an external HTML document into a div, but instead of loading just that particular area, the entire document is being loaded. Here's the code snippet for the trigger: $('a& ...

The process of setting up a carousel for tables using jQuery

I can successfully implement jquery for an image carousel, but now I need to find a way to create a sliding table format. Any assistance on this matter would be greatly appreciated. Here is the code I currently have: <ul> <li><a style= ...

Optimizing the performance of "document.createElement"

When attempting to display multiple rows of data in a popup using a for loop, I initially utilized text strings to create and append the div elements. However, I discovered that using document.createElement resulted in a 20% improvement in performance. D ...

Obtain the value from the controller of the amazing-rating component

Currently utilizing the amazing Rating AngularJS library available at https://github.com/bandraszyk/awesome-rating I am interested in understanding how to retrieve the selected value and store it in my controller. The $scope.rating is returning undefined ...

What is the best way to select an element with a dynamic ID in jQuery?

I'm encountering an issue when passing the ID through a directive. I'm unable to access the element using jQuery within the Link function, even though the element is receiving the correct dynamic ID as a parameter: Here's the Directive: (f ...

JQuery transmits null values

I have been troubleshooting my code for what feels like forever, but I just can't seem to find the error... My current project involves experimenting with JQuery and AJAX. I created a simple form with a textarea for submission. The form works perfect ...

Is nesting directives possible within AngularJS?

Having trouble creating a Directive that includes another directive from the AngularJS UI. Check out my html: <div class="col-md-12" ng-show="continent == '2'"> <my-rating></my-rating> </div> Here is the directiv ...

Do I need to provide my email and password while using the Firebase signInWithGoogle()?

After attaching the signInWithGoogle() method to a button within the form, instead of opening a popup window as expected, it prompts me to fill in the email and password fields. Below is the configuration file: import firebase from 'firebase/app' ...

Using jQuery to find and replace specific text starting from the nth instance

Input information = '/hello/world/test' I am trying to achieve the output 'hello-world-test' using jquery. I have experimented with methods like splice, replace, and a custom condition (see code snippet below). However, I have not bee ...

I encountered a permission error while trying to npm install, despite running the command with root privileges

After running npm install as root, I am still encountering permission errors. This is unfamiliar territory for me. I have attempted using chmod -R 777 *, and chown nobody:nogroup -R * within the project folder, but to no avail. Here's the specific er ...

Using a variable as a parameter when requesting a value from a JSON object in JavaScript

I consider myself to be at an intermediate level in JavaScript, but I've hit a roadblock when trying to access the key in a JSON message that is returned to me. My code is dynamic, so I need to pass the key into the query. For example: After running ...

Tips for sending a function in an AJAX request from jQuery to a Node.js server

This is the code I'm working with: let url = "/blabla"; let ajax_options = { data:{ params_list:{ sortFunction: (x, y) => parseFloat(x) - parseFloat(y); } } }; $.ajax(url,ajax_options).then((res) => { //d ...

Providing optimal image dimensions based on the size of the viewing window

In the process of creating an image hosting website, I have taken on the challenge to familiarize myself with different programming languages such as PHP, MySQL, HTML, CSS, and JavaScript. Currently, the website loads full-size images and resizes them to ...

Unusual behavior observed during the selection of a random number within a specified range

When a user inputs a range, let's say 3-5, the script should generate a random integer within that range. Initially, the code functions correctly. length = Math.floor(Math.random() * (5 - 3 + 1)) + 3; However, when I try to extract the values progra ...

Steps for triggering a re-render in a React component when an external value changes

I am currently working on a project that involves using Meteor and React. In my code, I have a class called WebRTC which handles all WebRTC-related logic: class WebRTC { this.isCalling = false; ... } In addition to the WebRTC class, there is ...

Is it possible for Netbeans 7.3 to debug a PHP script when triggered by a JSON request?

In my Netbeans 7.3.1 setup, I usually have no issues debugging PHP files with Xdebug when my site project is structured to generate the site directly from PHP code. However, I'm currently working on a site that consists mostly of HTML files and only h ...

How to pass an object between two Angular 2 components without a direct connection

My application is structured in the following way. <app> <header> <component-a></component-a> </header> <div> <router-outlet></router-outlet> <component-b></component-b> ...

Is there a way to delay loading 'div' until a few seconds after the 'body' has been fully loaded?

Is there a way to delay the appearance of the "text-container" div after the image is displayed? I have attempted to achieve this using JavaScript with the following code: <script> window.onload = function(){ var timer = setTimeout("showText()",700 ...

Change the local date and time to UTC in the format of yy:mm:dd H:M

I must change the date format from local time to UTC or ISO as yy:mm:dd H:M, or calculate the difference between local date times with 03:30 as yy:mm:dd H:M 2016-10-22T04:30:00.000Z convert this to 2016-10-22T01:00:00.000Z ...