FileReaderとAngularJSを使用して画像を表示

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からモデル化しています。

私は私のコントローラで次の手順を実行して、最初の画像を表示しようとしています：私のHTMLで

//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; 
} 

を私が持っている：

<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'.

私が見てきた例から、イメージブロブを取得したときは完全にはわかりません。

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); 

    }; 

あなたは明らか画像を受信するために何かをトリガする必要があります。私が理解しているように、許可を得ずにローカルファイルにアクセスすることはできません。ドラッグドロップは、そのディレクトリに権限を与えます。