使用FileReader和AngularJS显示图像

我见过很多这样的例子，但似乎无法让我的工作。使用FileReader和AngularJS显示图像

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

$scope.images = [ 
    { 
     "id": 1, 
     "type": "cloud", 
     "caller_id": "[email protected]", 
     "image_path": "file:///C:\\Users\\Public\\Pictures\\Sample Pictures\\Chrysanthemum.jpg", 
     "image_results": 23, 
     "image_id": 3243242 
    }, 
    { 
     "id": 2, 
     "type": "cloud", 
     "caller_id": "[email protected]", 
     "image_path": "file:///C:\\Users\\Public\\Pictures\\Sample Pictures\\Desert.jpg", 
     "image_results": 98, 
     "image_id": 3125312 
    }, 
    { 
     "id": 3, 
     "type": "cloud", 
     "caller_id": "[email protected]", 
     "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: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

从我看到的例子来看，我不完全确定他们什么时候得到图像blob？

来源

2017-08-04 Sara Tibbetts

我不认为你可以在这个实例中使用'file：//类型的路径。 – Claies

@Claies删除您误解的file：///' –

后，我会得到相同的结果。我的意思是，浏览器无法访问计算机本地硬盘（'file：//路径）上的图像，只能访问网络上的图像（'http：//路径）。换句话说，在浏览器中无法访问'C：\\ Users \\ Public \\ Pictures \\ Sample Pictures \\ Desert.jpg'。 – Claies

这对我有用。我有一个上传器项目，允许您放置图像，并在上传图像时显示图像，并使用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); 

    };

你显然需要一些触发接收图像。据我所知，你无法获得本地文件未经许可。拖放将授予该目录的权限。

来源

2017-08-04 18:48:26 Ohjay44

使用FileReader和AngularJS显示图像

回答

相关问题