Загрузка данных изображения в Angularjs

У меня есть куча URL-адресов изображений, и я хочу загрузить изображения из браузера в zip файл. Я планирую использовать jszip для создания zip файла. И у меня есть все URL-адреса изображений с сервера. Я попытался:

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="#" onclick="location.href='https://twitter.com/{{user.screen_name}}'; return false;"><img ng-src="{{user.profile_image_url}}" alt="User Twitter Image"></a></td>
        <td><a href="#" onclick="location.href='https://twitter.com/{{user.screen_name}}'; return false;">{{user.screen_name}}</a></td>
        <td>{{user.name}}</td>
        <td>{{user.description}}</td>  
    </tr>
</tbody>

Как загрузить данные изображения в angularjs? Есть ли способ получить его непосредственно для ng-src?

Спасибо

Ответ 1

В принципе у вас есть проблема с перекрестным доменом. Вы можете открывать изображения с удаленным URL-адресом, но вы не можете сделать запрос Ajax в другом домене, чем ваш. Пожалуйста, посмотрите здесь: http://en.wikipedia.org/wiki/Same-origin_policy

Вы можете обойти эту проблему, создав прокси-сервер. Это означает, что ваш запрос Ajax будет указывать на ваш сервер, и при ответе вы можете отправить адрес изображения, который может использоваться обычно после этого.

Ответ 2

Вы не можете совершать вызовы ajax для разных доменов без использования CORS.

НО, если вам нужно только фактическое изображение, вы можете просто сделать следующее:

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