請求QR碼並使用Angular JS顯示圖像

我的計劃是使用API（例如Google Charts API）創建QR碼，然後在我的網站上顯示生成的QR碼。我創建了一個由谷歌圖表API請求QR碼圖像的功能：請求QR碼並使用Angular JS顯示圖像

.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）。我如何在我的網站上顯示此內容？

來源

2015-12-21 doonot

我覺得還有更多這個，我不知道你爲什麼張貼來獲取圖表。 – xkcd149

不確定你對此評論的意思。 – doonot

你爲什麼張貼獲得二維碼？ – xkcd149

如果你不想使用圖像的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

來源

2015-12-23 21:34:25 koox00

非常感謝。很高興有這樣的解決方案。但是，由於這可以通過顯示圖像很簡單地解決，我將在此期間使用此解決方案！謝謝！ – doonot

返回的數據似乎是HTML。所以，你需要在谷歌的HTML注入到您的網頁，使用ng-bind-html指令：

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

來源

2015-12-21 16:48:19

數據是一個PNG文件，而不是HTML，據我所知。所以這不起作用。 – doonot

你能得到base64圖像嗎？如果是的話，那麼你只需要寫'

謝謝奧利弗，我之前試過這個。它看起來像谷歌的響應是一個二進制字符串，而不是一個base64字符串，所以這也不起作用。 – doonot

下面是使用NG綁定，HTML http://jsbin.com/lifuparija/edit?html,js,output

但是，如果沒有更的例子你想要完成什麼的深度例子，我覺得這只是黑暗中的一個鏡頭。

來源

2015-12-21 21:42:41 xkcd149

你可以使用這個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圖像0作爲你做了：

.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圖片到你的指令。

來源

2015-12-24 17:19:35

請求QR碼並使用Angular JS顯示圖像

回答

相關問題