请求QR码并使用Angular JS显示图像 [英] Request QR Code and show the image using Angular JS

问题描述

我的计划是使用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（函数（数据，状态，头文件，配置）{
 $ scope.qrcode = data; 
}）。 b $ scope.qrcode = status; 
}）; 
}）
  

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

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

答案似乎是一个图像（PNG）。我如何在我的网站上显示此内容？

解决方案

如果您不想按照原因使用图像url，并且您想从您可以使用以下内容：

  $ http.get（
https://chart.googleapis.com/ （函数（响应））{$ b $（其中，图表cht = qr& chs = 300x300& chl = 160％20FSU728F29G& coe = UTF-8，
 {responseType：'blob'}）
 .then b 
 var urlCreator = window.URL || window.webkitURL; 
 var imageUrl = urlCreator.createObjectURL（response.data）; 
 $ scope.qrcode ='< img src ='' + imageUrl +'/>'; 
 
}）; 
  

演示 jsbin

信用转至 @ jan-miksovsky

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?

解决方案

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

这篇关于请求QR码并使用Angular JS显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！