本文介绍了加载图像数据转换成Angularjs的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一大堆的图片网址,我想从浏览器中的图像下载到一个zip文件。我打算使用来创建压缩文件。而我从服务器的所有图像的URL。我尝试是:
I have a bunch of image urls and I want to download the images from the browser into a zip file. I'm planning on using jszip to create the zip file. And I have all the image urls from the server. What I attempted was :
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图像加载罚款:
What I find interesting is that in the html the images load fine:
<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?
How do I load the image data into angularjs? Is there a way to get it directly for the ng-src?
感谢
推荐答案
基本上,你在这里有一个跨域问题。您可以打开与远程URL的图像,但你不能让Ajax请求比你不同的域。请看看这里: http://en.wikipedia.org/wiki/Same-origin_policy
您可以通过创建一个代理超越了这个问题。这意味着你的Ajax请求将指向您的服务器和响应,你可以发送图像地址,该地址可以正常使用后
这篇关于加载图像数据转换成Angularjs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!