I've got a dilemma with downloading images from a browser into a zip file using JSZip. I have a list of image URLs from the server, and I'm trying to use the jszip library to create a zip file. Here's what I attempted:
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;
});
I encountered this error:
OPTIONS <url> No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
It's interesting that the images load fine in 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>
How can I load the image data into AngularJS directly from the ng-src? Any suggestions are appreciated.
Thank you