Question

我已经看过很多这方面的例子，但似乎仍无法让我的工作。

我有一个包含图像信息的对象数组。例如：

$scope.images = [
    {
      "id": 1,
      "type": "cloud",
      "caller_id": "me@me.me",
      "image_path": "file:///C:\\Users\\Public\\Pictures\\Sample Pictures\\Chrysanthemum.jpg",
      "image_results": 23,
      "image_id": 3243242
    },
    {
      "id": 2,
      "type": "cloud",
      "caller_id": "me@me.me",
      "image_path": "file:///C:\\Users\\Public\\Pictures\\Sample Pictures\\Desert.jpg",
      "image_results": 98,
      "image_id": 3125312
    },
    {
      "id": 3,
      "type": "cloud",
      "caller_id": "me@me.me",
      "image_path": "file:///C:\\Users\\Public\\Pictures\\Sample Pictures\\DSC_9864.jpg",
      "image_results": 1,
      "image_id": 927192
    }
];

我需要能够在图库中显示这些图像。我一直在为this gallery建模我的画廊，供参考。

我试图通过在我的控制器中执行以下操作来显示第一张图像：

//Image information
$scope.currentImage = _.first($scope.images);

//Display image
var reader = new FileReader();
reader.onload = function(event) {
    $scope.$apply(function() {
        $scope.image_source = reader.result;
    });
};
reader.readAsDataURL($scope.currentImage.image_path);


$scope.setCurrentImage = function(image){
    $scope.currentImage = image;
}

在我的HTML中，我有：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div ng-controller="jobsSampleImageController">

      <h2>AngularJS Powered Photo Album <small>by Josh Adamous</small> </h2>
        <div class="row">
          <div class="col-md-9">
            <div class="albumImage">
              <img id="current_image" ng-src="{{image_source}}" alt="{{currentImage.caller_id}}"/>
            </div>
            <h3>{{currentImage.caller_id}}</h3>

          </div><!-- End of Column -->
          <div class="col-md-3">
            <div class="wrapper">
              <ul class="list">
                <li ng-repeat="image in images" ng-click="setCurrentImage(image)">
                  <img ng-src="{{image_source}}" alt="{{image.caller_id}}"/>
                </li>
              </ul><!-- End of List -->
            </div><!-- End of Wrapper -->
          </div><!-- End of Column -->
        </div><!-- End of Row -->
      </div><!-- End of Album Controller -->
    </div><!-- End of Column -->
  </div><!-- End of Row -->
</div><!-- End of Container -->

这会导致错误：

TypeError：无法执行＆＃39; readAsDataURL＆＃39; on＆＃39; FileReader＆＃39;：参数1的类型不是＆＃39; Blob＆＃39;。

从我看过的例子中，我不完全确定他们何时获得图片blob？

Answer 1

这对我有用。我有一个上传器项目，允许您删除图像，并在上传图像时显示图像，并使用FileReader。

我的代码：

function handleDrop(event) {
        var length = event.dataTransfer.files.length;
        for (var i = 0; i < length; i++) {
            var entry = event.dataTransfer.items[i].webkitGetAsEntry();
            if (entry.isFile) {
                console.log('File Uploaded', entry);
                entry.file(function (myFile) {
                    if (entry.name.indexOf(".ini") < 0) {
                        handleThumbnails(myFile, entry.name, i)//This will handle displaying the images

                    }
                }, errorHandler);
            } else if (entry.isDirectory) {

            }
        }
    };

 function handleThumbnails(f, name, ind) { //Displaying images
        var reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                var img = document.createElement('img');
                img.setAttribute("id", name + ind);
                img.setAttribute("src", e.target.result);
                img.setAttribute("class", "imagePreview");
                img.setAttribute("title", name);
                document.body.appendChild(img);
            };
        })(f);
        reader.readAsDataURL(f);

    };

你显然需要触发一些东西来接收图像。据我了解，未经获得许可，您无法访问本地文件。拖放将为该目录授予权限。

使用FileReader和AngularJS显示图像

1 个答案: