关于javascript：将图片数据加载到Angularjs中


Load Image Data into Angularjs

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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;
    });

我得到的错误是：

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

我发现有趣的是，在html中图像可以正常加载：

1
2
3
4
5
6
7
8
<tbody>
    <tr ng-repeat="user in queriedUsers">
        <td><img ng-src="{{user.profile_image_url}}" alt="User Twitter Image"></td>
        <td>{{user.screen_name}}</td>
        <td>{{user.name}}</td>
        <td>{{user.description}}</td>  
    </tr>
</tbody>

如何将图像数据加载到angularjs？ 有没有办法直接为ng-src获取它？

谢谢

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

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

如果不使用CORS，则无法对不同的域进行Ajax调用。

但是，如果您只需要实际的图像，则可以执行以下操作：

1
2
3
4
5
6
7
8
9
10
// 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
}

相关讨论