My goal is to load a very large image (from the perspective of my web app), weighing around 10-20 MB using an AJAX call.
I am utilizing angular resource:
'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;
}
}
});
});
The response JSON I receive contains Base64-encoded image data in one of the fields, similar to this:
{title: "some title", picture: "<Base64-encoded image data>", ...}
After a successful response, I take response.picture and place it inside an <img>:
<img ng-src="{{pictureSrc}}" class="img-responsive center-block" alt="Picture">
like so:
Picture.get({id: resourceId}, function(response){
$scope.pictureSrc = 'data:image/png;base64,' + response.picture;
});
This method works fine until the image size exceeds 10MB, leading to JSON deserialization failure.
If I modify the Content-Type of the response to image/png, and only return the image data, the application still encounters errors, likely originating from angular.js.
Recognizing the limitations of my current approach, I believe it's necessary to reconsider how these images are fetched rather than attempting to resolve this specific issue.
Which brings me to my question: Is there a reliable way to fetch large images (up to 20MB) with an AJAX call using AngularJS?
UPDATE: I am utilizing FF 42.0 and Chrome 45.0.2454.101 (64-bit), aiming for compatibility across major browsers including IE8 (although that might require a separate discussion)
UPDATE 2: Additional Information: FF freezes when I solely return image data without any JSON formatting in my response. With JSON, it shows this error message:
JSON.parse: unterminated string at line 1 column 1572865 of the JSON data