请求二维码并使用 Angular JS 显示图像

Question

我的计划是使用 API（例如 Google 图表 API）创建一个 QR 码，然后在我的网站上显示生成的 QR 码。我创建了一个从 Google 图表 API:

请求 QR 码图像的函数

.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;
  });
})

当我尝试将响应绑定为 HTML 时，我得到：

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

响应似乎是一张图片 (PNG)。我怎样才能在我的网站上显示这个？

Answer 1

返回的数据好像是HTML。因此，您需要使用 ng-bind-html 指令将 Google HTML 注入您的页面：

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

Answer 2

这里是一个使用ng-bind-html的例子http://jsbin.com/lifuparija/edit?html,js,output

但是如果没有更深入的例子来说明你想要完成的事情，我觉得这只是瞎猜。

Answer 3

如果您出于某种原因不想按原样使用图像 url，并且想从内容中创建图像，您可以使用以下方法：

$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+'"/>';

});

展示 jsbin

归功于 @jan-miksovsky

Answer 4

您可以使用这个 directive 然后在您的 html 代码中使用它。

创建指令：

 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);
           }
      }
 })

然后在你的模块中注入这个指令，模块名称如下：

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

在您的控制器中将 QR 图像附加到 $scope，就像您所做的那样：

.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;
        });
 })

在您的 HTML 代码中使用如下指令：
```
    <av-qr image="qrcode"></av-qr>
```

** 您将 qrcode 图像传递给指令。

请求二维码并使用 Angular JS 显示图像

Request QR Code and show the image using Angular JS

javascript

ajax

qr-code

google-api

angularjs