Changing byte array to image in Angular 6

I have received the image file as a byte array from the server. My next step is to convert it into a jpeg file and then display it on a webpage.

Here's the code:

app.get('/getPhoto/:hash',function(req, res){
    console.log(req.params.hash);
    invoke = require('/Users/sanjeev.natarajan/ipfs/file1.js');

    invoke.getfile(req.params.hash).then((str)=>{
        console.log("result", str)

        res.send({"Result": str});
    })
    .catch((error) => {
        res.send({"Error": "An error occurred while fetching the file using the hashcode"});
    })    
});

I've successfully retrieved the data from the backend, now I just need to convert it into an image in Angular6.

Answer №1

If you have a byte array that you need to convert to a Base64-encoded string, you can achieve this by utilizing the btoa function. To display the image, you can then make use of a Data URL. However, it is important to be aware of the image's MIME type:

var bytes = [ ... ]; // obtain from server
var uints = new UInt8Array(bytes);
var base64 = btoa(String.fromCharCode(null, uints));
var url = 'data:image/jpeg;base64,' + base64; // utilize this in <img src="..."> binding

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

Can the NGXS store be shared between independent Angular (sub)projects?

Current Scenario: I am working on a micro-frontend setup consisting of a primary Angular application acting as the host, with multiple Angular libraries imported as modules that function as separate 'sub-apps'. Objective: My main aim is to estab ...

Resolve an "Uncaught ReferenceError" by importing an unused component to fix the error of not being able to access a variable before initialization

In my service file, where I store all other services used in the frontend, there is an import section that includes one component even though it is not being used. import { VacationComponent } from 'app/view/vacation/vacation.component'; When I ...

Navigating through async functions in an Express.js router

Encountered a lint error indicating that Promises cannot be returned in places where a void is expected. Both functions [validateJWT, getUser] are async functions. Any suggestions on how to resolve this issue without compromising the linter guidelines by u ...

Formatting the created_at attribute in ngx-datatable with Angular, a guide by @tusharghoshbd

I am utilizing @tusharghoshbd ngx-datatable in Angular-12 to showcase data. Below is the JSON response fetched from the API: { "message": "You have successfully Retrieved Department Detail", "error": false, "code&qu ...

Observable subscription not updating HTML with changes

My challenge is passing an object to the Object Model using a shared service to an already loaded component. Even though I receive data after subscribing, it does not reflect in the HTML view. <div *ngFor="let emp of emps" class="card&q ...

Each time the Angular Material autocomplete is used, it will trigger an API call to retrieve and

Whenever two letters are typed into the input field, I need to trigger an API call that displays a dropdown. If one more letter is typed, another API call should be made. My issue lies in dynamically binding and changing the API endpoint based on the searc ...

Tips for resolving Type Error in an Ionic Framework

Can anyone help me troubleshoot this issue: core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'slug' of undefined TypeError: Cannot read property 'slug' of undefined Here is the code I am using: ...

Defining the TypeScript interface for the onClick event in ReactJS

If you're looking to dive into React development, the tutorial on reactjs.org is a great place to start. While the tutorial code is in JavaScript, I've been working on converting it to TypeScript. I've successfully translated most of the c ...

Collaborating on a project that has been developed using various editions of Typescript

Currently, I am part of a team working on a large project using Typescript in Visual Studio. As we have progressed through different versions of the project, we have encountered an issue with versioning the installed TypeScript within Visual Studio. Situa ...

Troubleshooting issues encountered while sending HttpClient Get Requests from Angular Front-End to Node.js Back-End

I am encountering an issue where I keep getting the error message "Cannot GET /" on my local host URL when attempting to send a HttpClient get request from my Angular front-end to my Node.js back-end endpoint. Despite the fact that my back-end endpoint suc ...

New feature incorporated at the end of choices in MUI auto-suggest widget

Currently, I'm working on enhancing a category adder feature. Previously, I had limited the display of the "add category chip" to only appear for the no-options render scenario. However, I came across an issue where if there was a category like "softw ...

Angular Fragmentary Perspective

I have a lengthy form in angular that I am currently working on. I'm wondering if there is a way to divide it into multiple views and then link each of them back to the main view. <div class="container"> <div class="row" id="part1"> ...

Showing content based on the route - Angular

I'm struggling to hide the navbar based on a specific route in my application. I have managed to subscribe to the route changes, but I am having difficulty changing the display property accordingly. Here is what I have so far: export class AppCompo ...

Enhance TypeScript by optimizing the utilization of constructors within an array

I've managed to get this code working, but I'm convinced there's a more streamlined approach using rxjs. Can anyone shed some light on how I can simplify this? The main challenge here is that I need to invoke a custom constructor for each it ...

Error encountered in promise due to ng-bootstrap modal

I am currently utilizing @ng-bootstrap in my Angular 4 application. Successfully managed to open a modal instance and pass data to the modal. Upon closing the modal, I was able to retrieve the results from it. However, I encountered an issue when attempt ...

Utilizing Service within Express Router

My journey into the world of NodeJS is just beginning, coming from a .NET background with a love for dependency injection, inversion of control, and microservices. I am now venturing into TypeScript to create services based on my past experiences. Using ex ...

Instructions for linking a string to a mat-checkbox

I have implemented mat-checkbox in my application, but I am struggling to receive a string from the checkbox instead of a boolean. After consulting the Angular Material checkbox API on their website here, I found that there is a 'value' propert ...

What could be causing my Bootstrap accordion to not expand or collapse within my Angular application?

Struggling with my Accordion Angular component that utilizes Bootstrap - the collapsing and expanding feature isn't functioning properly. I've simply copied the bootstrap code into my accordion.component.html. <div class="accordion accord ...

Whenever I click on the button, I expect it to generate a fresh div containing the updated information. However, instead of creating a new one, it simply modifies the existing div. How can I rectify this issue?

Every time I click the fetch API button, a new address is retrieved and displayed in the fields. I'm looking to add a new div with the latest address without removing the previous one: const fetchapi = async () => { try { setLoading(tru ...

Downloading in Angular 9 is restricted. The frame responsible for starting the download is sandboxed; however, the 'allow-downloads' flag is not enabled

Hey everyone :) There's a warning popping up in the console when I attempt to download a file within the application: Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not s ...