將圖像數據加載到Angularjs中

我有一大堆圖像url，我想從瀏覽器中將圖像下載到zip文件中。我正計劃使用jszip來創建zip文件。我擁有來自服務器的所有圖像網址。我試圖爲：將圖像數據加載到Angularjs中

var img = zip.folder("profiles"); 



async.mapSeries($scope.queriedUsers, 
    function (user, iterCallback) { 

     delete $http.defaults.headers.common['X-Requested-With']; 
     $http.get(user.profile_image_url, {responseType: "arraybuffer"}) 
      .success(function (data) { 
       iterCallback(null, {data: data, name: user.screen_name}); 
      }) 
      .error(function (data, status) { 
       iterCallback(status, data); 
      }) 

     }, 
    function (err, results) { 
     _.each(results, function (result){ 
      img.file(result.screen_name + ".gif", result.data, {base64: true}); 
     }); 

     var content = zip.generate(); 
     window.location.href = "data:application/zip;base64," + content; 
    });

，我得到的錯誤是：

OPTIONS <url> No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我覺得有趣的是，在HTML中的圖像加載罰款：

<tbody> 
    <tr ng-repeat="user in queriedUsers"> 
     <td><a href="https://twitter.com/{{user.screen_name}}"><img ng-src="{{user.profile_image_url}}" alt="User Twitter Image"></a></td> 
     <td><a href="https://twitter.com/{{user.screen_name}}">{{user.screen_name}}</a></td> 
     <td>{{user.name}}</td> 
     <td>{{user.description}}</td> 
    </tr> 
</tbody>

我如何將圖像數據加載到angularjs中？有沒有辦法直接得到它的ng-src？

謝謝

來源

2013-12-17 GTDev

基本上你在這裏有一個跨域問題。您可以使用遠程URL打開圖像，但無法向不同於您的域請求Ajax請求。請看看這裏：http://en.wikipedia.org/wiki/Same-origin_policy

你可以通過創建一個代理超過這個問題。這意味着您的Ajax請求將指向您的服務器，並在響應中發送圖像地址，之後可以正常使用該地址。

來源

2013-12-17 17:52:15

您不能在不使用CORS的情況下對不同域進行ajax調用。

，但如果你只需要在實際的圖像，你可以做到以下幾點：

// Create image object 
var img = document.createElement("img"); 

// Set source to profile image url 
img.src = user.profile_image_url; 

// Wait for image to load 
img.onload = function(){ 
    // Callback 
}

來源

2013-12-17 18:00:16 xmysteriox

您可能能夠然後使用canvas元素仍然得到的圖像數據，http://stackoverflow.com/問題/ 934012 /獲取圖像數據，在JavaScript的 –

將圖像數據加載到Angularjs中

回答

相關問題