Bild laden von Daten in Angularjs

Ich habe eine Reihe von Bild-urls und ich möchte den download der Bilder aus dem browser in eine zip-Datei. Ich bin der Planung über die Verwendung jszip zum erstellen der zip-Datei. Und ich habe alle Bild-urls vom server. Was ich versuchte war :

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;
    });

Und die Fehler, die ich bekam, war:

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

Was ich interessant finde ist, dass im html die Bilder laden in Ordnung zu sein:

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

Wie lade ich den Bild-Daten in angularjs? Gibt es einen Weg, um es direkt für die ng-src?

Dank

InformationsquelleAutor GTDev | 2013-12-17

1

Grundsätzlich haben Sie eine cross-domain-Problem hier. Sie können Bilder öffnen, die mit remote-URL, aber Sie machen nicht den Ajax-request auf eine andere domain als die ihrige. Bitte schauen Sie hier: http://en.wikipedia.org/wiki/Same-origin_policy

Können Sie zu überholen, dieses problem durch erstellen eines proxy. Dies bedeutet, dass Ihre Ajax-request wäre, der auf Ihre server und bei der Antwort, die Sie senden könnten Sie die Bild-Adresse, die verwendet werden können, die normalerweise danach.

InformationsquelleAutor Joao Almeida
0

Können Sie nicht, stellen Sie ajax-Aufrufe an unterschiedliche Domänen ohne die Verwendung von CORS.

ABER wenn Sie nur das eigentliche Bild, können Sie nur Folgendes tun:
```
//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
}
```
Sie könnten dann immer noch die Bild-Daten über ein canvas-element, stackoverflow.com/questions/934012/get-image-data-in-javascript

InformationsquelleAutor xmysteriox

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.