Question

在我的AngularJS webapp中，我需要从文件加载图像然后显示它。但它不起作用。

我的插件是：http://plnkr.co/edit/gpwyUd3Hh6HvrBnt2dR6

我的JavaScript是：

var test = function() {
var getImgBytes = function() {
    return $http({    url: 'Spa_03.jpg', 
                      method: 'GET', 
                      headers: {'Content-Type': 'image/jpeg'}})
    .then(
      function(result) {
        console.log('load img from file');
        $scope.imgTest = result.data;
    });
  }();
$scope.height = 853;
$scope.width = 1280;   }();

我的HTML是：

<img ng-src="data:image/JPEG,{{imgTest}}" width="320px" height="213px"/>

有人可以帮我解决问题吗？

问候。

Answer 1

如果您通过$ http请求下载图像，它不是base64编码的值。它是二进制格式的文件，您需要通过Javascript或画布将其转换为base64。试试这个https://stackoverflow.com/a/6150397

Answer 2

这段代码直接来自上面的答案，并进行了少量编辑

  function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  // xhr.setRequestHeader("username", auth.username);
  // xhr.setRequestHeader("password", auth.password);
  xhr.responseType = 'blob';

  xhr.send();
}


toDataURL('http://whatever/file/fid/'+ xRequest,  function(dataUrl) {
  //console.log('RESULT:', dataUrl)
  $scope.loading = false;
  $scope.image = dataUrl;
})

然后你可以像这样使用你的html使用图像范围

<div class="content-avatar"><img ng-src="{{image}}" />

AngularJS - 从字节显示图像

2 个答案: