javascript - 将图像数据加载到 Angularjs 中

Question

我有一堆图像网址，我想将浏览器中的图像下载到 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？

谢谢

Answer 1

基本上，您在这里遇到了跨域问题。您可以使用远程 URL 打开图像，但无法向与您所在域不同的域发出 Ajax 请求。请看这里:http://en.wikipedia.org/wiki/Same-origin_policy

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