Request QR Code and show the image using Angular JS

Question

My plan is to create a QR code by using an API (such as Google Charts API) and then show the generated QR code on my website. I created a function that requests a QR Code image from Google Chart API:

.controller('DealCtrl', function($scope, $http) {
  $http.get("https://chart.googleapis.com/chart?cht=qr&chs=300x300&chl=160%20FSU728F29G&coe=UTF-8")
      .success(function(data, status, headers, config) {
        $scope.qrcode = data;
      }).error(function(data, status, headers, config) {
        $scope.qrcode = status;
  });
})

When I try to bind the response as HTML, I get this:

<div ng-bind-html="qrcode"></div>

The response seems to be an image (PNG). How can I show this on my website?

I feel like there is more to this and I'm not sure why you are posting to get the chart. — xkcd149, Dec 21 '15 at 17:24
The image being returned is binary data vs. Base64. [There is a similar SO question posted here with a possible solution](http://stackoverflow.com/questions/29780147/how-to-return-image-from-http-get-in-angularjs) — rlcrews, Dec 21 '15 at 21:51
@xkcd149, ah I see what you mean. Google API accepts GET and POST requests, so that is not the issue. — nimrod, Dec 21 '15 at 22:33
maybe naive question but the url is the image why don't you show it as is? — koox00, Dec 23 '15 at 20:49
Haha, that is a VERY good question :D I would say that is basically the solution :D — nimrod, Dec 23 '15 at 20:54

koox00 · Accepted Answer · 2015-12-24T09:03:15.380

2

If you don't want to use the image url as is for some reason and you want to create the image from the contents you can use this:

$http.get(
    "https://chart.googleapis.com/chart?cht=qr&chs=300x300&chl=160%20FSU728F29G&coe=UTF-8",
    {responseType: 'blob'})
.then(function(response) {

    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( response.data );
    $scope.qrcode = '<img src="'+imageUrl+'"/>';

});

demonstrating jsbin

Credit goes to @jan-miksovsky

edited Dec 24 '15 at 09:03

answered Dec 23 '15 at 21:34

koox00

2,691
2
15
25

Thank you very much. Nice that there is a solution for this. However, since this can be solved quite simple by showing the image as is, I will use this solution for the meantime! Thank you! – nimrod Dec 24 '15 at 08:47

score 1 · Answer 2 · answered Dec 21 '15 at 16:48

1

The returned data seems to be HTML. So you need to inject the Google HTML into your page, using ng-bind-htmldirective :

<div ng-bind-html="qrcode"></div>

answered Dec 21 '15 at 16:48

Sébastien Ollivier

578
2
10

The data is a PNG file, not HTML as far as I can tell. So this did not work. – nimrod Dec 21 '15 at 17:16
Could you get the base64 image ? If yes, then you just have to write ` – Sébastien Ollivier Dec 21 '15 at 22:26
Thank Oliver, I tried this before. It looks like the response from Google is a binary string and not a base64 string, so this does not work either. – nimrod Dec 21 '15 at 22:34
1

Then try `$scope.qrcode = window.btoa(data);` to encode your binary into base64. – Sébastien Ollivier Dec 21 '15 at 22:45

score 0 · Answer 3 · answered Dec 21 '15 at 21:42

0

Here is an example of using ng-bind-html http://jsbin.com/lifuparija/edit?html,js,output

But without a more in depth example of what you are trying to accomplish, I feel like this is just a shot in the dark.

answered Dec 21 '15 at 21:42

xkcd149

842
1
11
17

score 0 · Answer 4 · answered Dec 24 '15 at 17:19

You can use this directive and then use it in your html code.

create directive:

 angular.module('av.qr', [])
.directive('avQr', function() {
    return {
             restrict: 'E',
             template: '',
             scope: {
                      image: '='
           },
           link: function(scope, elem, attr) {
                 var qrImage = angular.element(scope.image);
                 elem.append(qrImage);
           }
      }
 })

then in your module inject this directive with module name like below:

angular.module('my.module', ['av.qr'])

In your controller append QR image to $scope as you did:

.controller('DealCtrl', function($scope, $http) {
   $http.get("https://chart.googleapis.com/chart?                      cht=qr&chs=300x300&chl=160%20FSU728F29G&coe=UTF-8")
        .success(function(data, status, headers, config) {
             $scope.qrcode = data;
         }).error(function(data, status, headers, config) {
             $scope.qrcode = status;
        });
 })

In your HTML code use your directive like this:
```
    <av-qr image="qrcode"></av-qr>
```

** You pass your qrcode image to your directive.

Request QR Code and show the image using Angular JS

4 Answers4

Linked