将图像数据加载到Angularjs中

Load Image Data into Angularjs

本文关键字：Angularjs 加载 图像 数据      更新时间：2023-09-26

我有一堆图像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="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获取它？

感谢

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

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

如果不使用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
}
相关文章：