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

时间:2015-12-21 16:44:32

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

我的计划是使用API​​(例如Google Charts API)创建QR码,然后在我的网站上显示生成的QR码。我创建了一个从Google Chart 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>

enter image description here

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

4 个答案:

答案 0 :(得分:1)

如果您因某些原因不想使用图片网址而想要根据内容创建图片,可以使用此图片:

$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

答案 1 :(得分:0)

返回的数据似乎是HTML。因此,您需要使用ng-bind-html指令

将Google HTML注入您的页面

&#13;
&#13;
<div ng-bind-html="qrcode"></div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

以下是使用ng-bind-html http://jsbin.com/lifuparija/edit?html,js,output

的示例

但如果没有更深入的例子说明你想要完成的事情,我觉得这只是在黑暗中拍摄的。

答案 3 :(得分:0)

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

  1. 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);
               }
          }
     })
    
  2. 然后在你的模块中注入这个带有模块名的指令,如下所示:

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

  3. 在您的控制器中将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;
            });
     })
    
  4. 在您的HTML代码中使用您的指令:

        <av-qr image="qrcode"></av-qr>
    
  5. **您将qrcode图片传递给指令。