在頁面加載時將圖像標識存儲在本地存儲中 - AngularJS

Question

如何在頁面以angularJS加載時將圖像標識存儲在本地存儲中。

angular.module('app', [ 
    'ngStorage' 
    ]). 

    controller('Ctrl', function(
    $scope, 
    $localStorage 
){ 
    // here I need to store image 
    }); 
    }); 

Answer 1

您可以將圖像轉換爲Base64並將其存儲在localStorage的

<canvas id="myCanvas" /> 

在HTML文件中創建一個元素

var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("preview"); 
    ctx.drawImage(img, 10, 10); 
    $localStorage.logo = c.toDataURL() 
    alert(c.toDataURL()); 

Answer 2

試試這個

controller('Ctrl', ['$localStorageProvider', function(
    $scope, 
    $localStorageProvider 
){ 
    $http.get("http://someurl.com/someimagepath") 
     .then(function(response){   
      $scope.myImage = response.data; 
      $scope.myImage = window.btoa($scope.myImage); // store it as base64 format 
      $localStorageProvider.set('MyImage', $scope.myImage); 
     }); 
    }); 
    }); 

使用它就像

<img ng-src="data:image/JPEG;base64,{{myImage}}"> 

Answer 3

我們無法直接將圖像保存到本地存儲。我們需要它隱蔽爲base64然後保存到本地存儲

這是演示：如何保存轉換圖像立足64，然後將其保存到本地存儲 http://jsfiddle.net/8V9w6/

function handleFileSelect(evt) { 
 
    var files = evt.target.files; // FileList object 
 

 
    // Loop through the FileList and render image files as thumbnails. 
 
    for (var i = 0, f; f = files[i]; i++) { 
 

 
     // Only process image files. 
 
     if (!f.type.match('image.*')) { 
 
     continue; 
 
     } 
 

 
     var reader = new FileReader(); 
 

 
     // Closure to capture the file information. 
 
     reader.onload = (function(theFile) { 
 
     return function(e) { 
 
      // Render thumbnail. 
 
      var span = document.createElement('span'); 
 
      span.innerHTML = ['<img class="thumb" src="', e.target.result, 
 
          '" title="', escape(theFile.name), '"/>'].join(''); 
 
      
 
      document.getElementById('list').insertBefore(span, null); 
 
      localStorage.setItem('img', e.target.result); 
 
     }; 
 
     })(f); 
 

 
     // Read in the image file as a data URL. 
 
     reader.readAsDataURL(f); 
 
    } 
 
    } 
 

 
    document.getElementById('files').addEventListener('change', handleFileSelect, false); 
 

 

 
    if(localStorage.img) { 
 

 
     var span = document.createElement('span'); 
 
      span.innerHTML += ['<img class="thumb" src="', localStorage.img, 
 
          '" title="test"/>'].join(''); 
 

 
      document.getElementById('list').insertBefore(span, null); 
 
    
 
    }

.thumb { 
 
    height: 75px; 
 
    border: 1px solid #000; 
 
    margin: 10px 5px 0 0; 
 
    }

<input type="file" id="files" name="files[]" multiple /> 
 
<output id="list"></output>