Question

我尝试加载一个非常大的图片（从网络应用程序的角度来看），通过AJAX调用大约10-20 MB。

我使用角度资源：

'use strict';

angular.module('myApp')
.factory('Picture', function ($resource, DateUtils) {
    return $resource('api/pictures/search', {}, {
        'get': {
            method: 'GET',
            transformResponse: function (data) {
                data = angular.fromJson(data);
                return data;
            }
        }
    });
});

作为回报我得到一个响应JSON，其中一个字段包含Base64编码的图像，如下所示：

{title: "some title", picture: "<Base64-encoded image data>", ...}

成功回复后，我会response.picture将其放入<img>：

<img ng-src="{{pictureSrc}}" class="img-responsive center-block" alt="Picture">

像这样：

Picture.get({id: resourceId}, function(response){
        $scope.pictureSrc = 'data:image/png;base64,' + response.picture;
    });

这种方法可以工作到大约10MB，但是一旦图像的大小增加，JSON反序列化就会失败。

如果我将响应的Content-Type更改为image/png，并且仅返回图片数据，则应用仍会失败，但会在angular.js中的某处。

我意识到我当前的方法并不灵活，而且在这一点上我似乎必须改变这种图像提取的方式，而不是解决这个问题。

因此我的问题是：使用AngularJS进行AJAX调用是否可以获得大图像（最大20MB）？

UPD ：我正在运行FF 42.0和Chrome 45.0.2454.101（64位），但预计它可以在所有主流浏览器以及IE8上工作（这可能是不同会话的主题）

UPD 2 ：澄清：如果我只回复图像数据而不是JSON，则会冻结FF。如果是JSON，则会显示JSON.parse: unterminated string at line 1 column 1572865 of the JSON data。

Answer 1

HTTP响应（即您的情况下为JSON）没有大小限制。 <强>浏览器记忆是一种限制。

在你的案例中，从JSON响应解析的对象消耗太多内存。因此，它变得没有反应。您可以使用不同的数据大小进行测试，并检查您的应用程序是否正常运行。

希望它有所帮助！

使用AngularJS加载非常大的图像

1 个答案: