1

我有一堆图片网址，我想将浏览器中的图片下载到一个 zip 文件中。我打算使用jszip创建 zip 文件。我有来自服务器的所有图片网址。我尝试的是：

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 获取它？

谢谢

4

2 回答 2

1

基本上你在这里有一个跨域问题。您可以使用远程 URL 打开图像，但不能向与您的域不同的域发出 Ajax 请求。请看这里：http ://en.wikipedia.org/wiki/Same-origin_policy

您可以通过创建代理解决此问题。这意味着您的 Ajax 请求将指向您的服务器，并且在响应时您可以发送图像地址，之后可以正常使用。

于 2013-12-17T17:52:15.147 回答
0

如果不使用 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-17T18:00:16.080 回答