Save images captured by an external camera and store them in a database using Ionic 3

Currently, I am in the process of developing an application utilizing ionic 3. The main functionality of the app involves capturing an image from an external camera (which will return a file URL) and then saving it in a local database using sqllite as base64.

Below is my implementation:

takeImage(){
const fileTransfer: FileTransferObject = this.transfer.create();

this.takePicture().subscribe(data => {
    this.wait(7000);
            this.listFiles().subscribe(data => {     
      const url = data['results'].entries[0].fileUrl;
      fileTransfer.download(url, this.file.dataDirectory + data['results'].entries[0].name).then((entry) => {
        this.room.img = entry.toURL();
        this.base64.encodeFile( entry.toURL()).then((base64File: string) => {
        this.room.img = base64File;},
        (err) => {
                  console.log(err);
                });
}, (error) => {});
},
   err => {console.log(err);});
   },
   err => {console.log(err);});
}

Despite my best efforts, I have encountered difficulties in displaying the base64File.

Answer №1

If you want to display a base64 image, make sure to import DomSanitizer in your component and create an instance variable in the constructor. Here is the code snippet:

constructor(public _DomSanitizer: DomSanitizer)

<img class="one-image" *ngFor="let image of item; let i= index" style="height:120px;" [src]="_DomSanitizer.bypassSecurityTrustUrl(image.imgUrl)" #images (click)="imageOption(i,images,image.data,image.ext)"/>

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

Utilizing Jquery for Selecting Multiple Classes and Importing External Content

I'm faced with a challenge involving 2 links, both having the class dynamicLoad. <ul class="navbar"> <li><a href="Page3-News.html" class="dynamicLoad news">NEWS</a></li> <li><a href="Page2-Events.html" ...

Experiencing a challenge with Express and PassportJs when using the Google OAuth2.0 strategy as it's not providing the

Currently, I am in the process of configuring an authentication route for our application. Unfortunately, I am facing a challenge with the Google oAuth 2.0 strategy for PassportJs as it does not provide me with a req.user object when using sequelize. Below ...

Preventing Form Field Displacement in a Bootstrap Form

Hello there, I'm using Twitter Bootstrap version 2.3.2 and have a form with a unique setup. The form includes a dropdown with a checkbox positioned to the right of it. The concept is that if the user clicks on the checkbox, the dropdown will be hidden ...

Iterating through and presenting elements of an array sequentially

Is there a way to create a loop or function that can show a new array index every time it is clicked? I attempted using a for loop, but it only displays the first value and then jumps to the last value when clicked again. var arrow = document.getElementBy ...

Using callback functions with Ajax

I'm facing an issue with the code snippet below, within a prototype, where I am trying to pass callback functions (successf, failuref) when creating an instance of Data. Unfortunately, the callbacks don't seem to be triggered. Any assistance on t ...

Hello, I am attempting to switch tabs based on the selected value using AngularJS

Here is the code snippet I am working with: function showFields(){ vm.activetab = ''; if(vm.selectpage.name=='dashboard'){ vm.activetab.main = true; }else if(vm.selectpage.url == 'calender'){ vm.activetab.cal ...

SinonJS - Retrieving Property Value Prior to Stub Invocation

Currently leveraging sinon.js for stubbing functionalities where it is feasible to stub and spy on methods but not properties based on my observations. I'm interested in knowing if there's a way to verify whether state.searchText gets assigned t ...

Resizing Div elements in React

I am currently working on a Drawer navigation feature and I am exploring the option of enabling mouse drag resize functionality. To achieve this, I have included a div element where I listen for the onMouseDown event. Once triggered, I then add an event li ...

What could be the reason for this Javascript code not functioning as intended, failing to generate a random number between 1 and 3 when I click on any of the buttons

Could someone help me with generating a random number between 1 and 3 each time I click on one of the buttons (rock, paper, scissors)? I am new to programming and not sure what I'm doing wrong. <!doctype html> <html lang="en"> <head& ...

A guide on converting nested arrays within a JSON file into a table format in Google Sheets (possibly leveraging Javascript?)

After successfully connecting via OAuth2 to retrieve a JSON performance report for shares, I am curious about how to convert this object into a matrix format within Google Sheets. { "id": "ID-23035", "total_gain": 11795.72, "holdings": [ ...

Filtering data in the options of the second select tag in AngularJS depending on the id selected in the first select tag

I'm currently working on a mobile app that features a view with two select tags. The first select tag contains options for teams, while the second select tag displays forms associated with the team IDs selected in the first select tag. My goal is to f ...

Webpack is unable to locate a specific custom JavaScript file

Currently, we are in the process of transitioning from grunt to webpack for our project. Within our project, we have a JS file named boiler that is used to define the core classes which are frequently accessed. __boiler__.js define(function (require) { ...

Troubleshooting: 404 Error When Trying to Send Email with AJAX in Wordpress

In the process of creating a unique theme, I encountered an interesting challenge on my contact page. I wanted to implement an AJAX function that would allow me to send emails directly from the page itself. After conducting some research, I managed to find ...

Show Data on the Right-hand Side

Objective: Arrange the component names in two columns - left and right, with different objects like input textboxes based on a browser width of 981px. The desired layout is showcased in this link "https://jsfiddle.net/2w9kskr2/". Challenge: After impl ...

Retrieve data from an array of JSON objects within a JSON object using ReactJS

Trying to extract data from JSON like this: { "id": 371, "city": "London", "name": "London Station", "trains": [ { "id": 375, "number": "1023", "numberOfCarriages": "21" } ] } Interes ...

Sencha ExtJs[4.2]: Is it possible to selectively disable a single action button in the handler function for a column item?

Here is a code snippet example: Ext.create("Ext.tree.Panel", { renderTo: $(".gsBasciInfo")[0], store: "basic_grid_store", useArrows: true, rootVisible: false, columns: { items: [{ text: 'id', d ...

Encountered difficulties while attempting to set up React.js

Why am I encountering difficulties installing React? I managed to create a node module file, but it is being automatically deleted. I ran the command npx create-react-app my-app. Below is a screenshot. Aborting installation. npm install --no-audit --save ...

Preserving client-side page state during page reloads in angular.js apps

I am currently developing a Single Page application using angular.js and I have encountered an issue that I am struggling to resolve. When performing a full page refresh in an angular app, how can we verify if the user still has a valid session? While Sta ...

What is the process for defining an object with a React component as one property and its corresponding props as another property?

Imagine I have an object structured like this: { Component, //<--- the component props, //<--- the props of the component } I want to create a type for this object that can accept a component and automatically infer the type of its props as the ...

Tips for executing nodemon and forever in the background

Good morning! Having an issue with my node.js server running in the background. I came across this helpful thread on Stack Overflow which suggested using Forever + Nodemon together I like the concept, however, when I implement it as shown here: forever ...