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

【问题标题】：Request QR Code and show the image using Angular JS使用 Angular JS 请求二维码并显示图像
【发布时间】：2016-03-27 19:29:13
【问题描述】：

我的计划是使用 API（例如 Google Charts API）创建一个二维码，然后在我的网站上显示生成的二维码。我创建了一个从 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;
  });
})

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

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

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

【问题讨论】：

我觉得还有更多内容，我不知道你为什么要发帖来获取图表。
不确定您对这条评论的意思。
你为什么发帖来获取二维码？
返回的图像是二进制数据 vs. Base64。 There is a similar SO question posted here with a possible solution
可能是个幼稚的问题，但网址是图片，为什么不按原样显示？

标签： javascript angularjs ajax google-api qr-code

【解决方案1】：

你可以使用这个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 图像传递给你的指令。

【讨论】：

【解决方案2】：

如果您出于某种原因不想按原样使用图像 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

【讨论】：

非常感谢。很高兴有一个解决方案。但是，由于可以通过按原样显示图像来解决这个问题，因此我将暂时使用此解决方案！谢谢！

【解决方案3】：

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

但如果没有更深入的示例来说明您要完成的工作，我觉得这只是在黑暗中拍摄。

【讨论】：

【解决方案4】：

返回的数据似乎是 HTML。因此，您需要使用 ng-bind-htmldirective 将 Google HTML 注入您的页面：

&lt;div ng-bind-html="qrcode"&gt;&lt;/div&gt;

【讨论】：

据我所知，数据是 PNG 文件，而不是 HTML。所以这不起作用。
你能得到base64图像吗？如果是，那么你只需要写 `'
谢谢奥利弗，我以前试过这个。看起来 Google 的响应是二进制字符串而不是 base64 字符串，所以这也不起作用。
然后尝试$scope.qrcode = window.btoa(data); 将您的二进制编码为base64。