How to return `QR` Code Image from Laravel API to Angular 6 through JSON response?

Question

I am creating a Google 2FA in my project. I have this QR code generator from bacon qr code in my Laravel app (backend). I want this to be returned as a JSON response to my Angular app (frontend) through API.

I have this code in my Laravel Controller

public function google2faAuth($id){

        // Get User
        $user = User::find($id);

        // Initialise the 2FA class
        $google2fa = app('pragmarx.google2fa');

        // Save 2FA data to user2faAuth table
        $twoFaAuth = new User2faAuth();

        $twoFaAuth->userId = $user->id;
        $twoFaAuth->secretCode = $google2fa->generateSecretKey();

        $twoFaAuth->save();

        // Create QR image
        $QRImage = $google2fa->getQRCodeInline(
            config('app.name'),
            $user->email,
            $twoFaAuth->secretCode
        );

        return response()->json($QRImage);
    }

But what I received in my Angular app is something like this.

"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAAFAElEQVR4nO3dwW7YNhRFwcbo\/3+y0U0QaKOGMnlEyZ5ZGjGlpBfsA0k9\/vr8\/PwHVvvY\/QJ8T4JFQrBICBYJwSIhWCQEi4RgkRAsEoJFQrBICBYJwSIhWCQEi4RgkRAsEoJFQrBICBYJwSIhWCQEi4RgkRAsEv+uHe7jY31Sz77VPj5r5nvus3ceGfPq33dmzOPv3vnv\/DVmLBKCRUKwSCyusY6KumektrhaM62q4a7+fVfVScW\/8zwzFgnBIiFYJMIa62jk\/+VX65jjmFfrqrP6aeTnZ1bVdiNjzvz5e3o4mrFICBYJwSJxU421yqp9tKt1xkitNmNmv\/KZzFgkBIuEYJF4WY01sy41M\/7VZ428w3vrpxFmLBKCRUKwSNxUY62qJ2bOSK3a7xsZc6Teuvo+xZmwjhmLhGCRECwSYY3Vnaf+2jtcXXMa+fnRzH5lcQ5srye+E9+AYJEQLBK\/nrPyUbh6fusJ\/Rq+x38RMxYJwSIhWCQe1B9rVf+nVetMM\/XZ1d4TxRrbzJrcPDMWCcEiIVgkFq9j1efBi\/pg5lvFVbVLUVNefZYepLyAYJEQLBLhXmFdc9T9Guo+EUUP0uesaZmxSAgWCcEiseE81qrz4CPjr+r1sGrtbWTMVX1T9zJjkRAsEoJFYsNe4dGq\/bhV+1\/F+fdinGKN0DoWLyBYJASLxEN7N+zqwz7z3DvP+8\/Ul\/Xd0r9HjsblhxMsEoJF4qbzWCPq\/a9V9dZML6tVZ6dG3vPIeSy+CcEiIVgkwr3Co5nvBGfqg2L\/8Ux9h8+Z4rzaPDMWCcEiIVgkNtRYu\/oUPOEOwWIt7eo4zmPxYoJFQrBIPKh3w6r1ql09Gs5+96qip8PIs9RYvIBgkRAsEjfdCX1U9Dq\/Ov7Iz2dqxJn3vGrmzumOGYuEYJEQLBIbzrzfuR+36oxX3Y\/0zKpz7qveZ5wZi4RgkRAsEjetYxVrObv28q72RCi+T7y6xjay1mWvkBcQLBKCRWLDndCr+gjceY6qWK96Qq9261i8jGCRECwSG85jnbmzjjmzqp\/nqjWqGff0Gj1jxiIhWCQEi0RYY915j019V+DM79bfSz6tP8Xvp9\/wDH4gwSIhWCRu6o91pjiTXp9hL+6HnrHrHqH\/Z8YiIVgkBIvEhjuhn3AO6ai+i7ruyzoyph6kfBOCRUKwSGw+jzWzBrPq\/Naq\/lgz44+MOXOW6\/59QzMWCcEiIVgkHtS74fhnRmqLmbqqWG\/bVefVZ8K+xoxFQrBICBaJzX3ei28Ji1pnxNXapfje8M7+8n95kxuewQ8kWCQEi0TY571QnzG\/857BO+vL4p7Hv7zJwrHgD8EiIVgkNvQgvWqmj8PMufJif7DoobVqbW8tMxYJwSIhWCQe1B\/raNUZ7aL\/wpmZs1DFN4B7v980Y5EQLBKCReKm81jFXthMDbRqrWjme8OR5478\/Jne9K68iGCRECwSD7pLp3DnHTgjzx15h6K3lv5YfBOCRUKwSLy4xiruez4b\/+oaW12rrTpb1q2NmbFICBYJwSKxuT\/WrufuupNn5H1W3Us98z7zzFgkBIuEYJEIa6z6\/NCq9aFVZ8VWrZONnMcq+qbaK+QFBIuEYJF4WX8s3sKMRUKwSAgWCcEiIVgkBIuEYJEQLBKCRUKwSAgWCcEiIVgkBIuEYJEQLBKCRUKwSAgWCcEiIVgkBIuEYJEQLBKCReI\/leHQVUfEkcoAAAAASUVORK5CYII="

How can I return this properly so that I can render this QR code image in my front end?

stackoverflow.com/questions/38812993/base64-to-image-angular-2/…, similar to what you're looking for. Use the base64 string that you receive in angular to create the image. — v1shva
– v1shva, Commented Nov 15, 2018 at 9:22

Nikhil Sridhar · Accepted Answer · 2018-11-15 09:16:52Z

1

This is base 64 content of the scanned QR image. Try looking for base 64 to image conversion, and then display the data in your front end using the img tag.

answered Nov 15, 2018 at 9:16

Nikhil Sridhar

765 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to return `QR` Code Image from Laravel API to Angular 6 through JSON response?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related