In order to avoid firefox's aggressive de-caching/garbage collection of large images we've been experimenting with ways to store references to images. Keeping references to 'new Image()' objects seems to work, but uses a lot of memory.
I'm now experimenting with using
$.ajax({
url: "http://localhost/360/img/frames/compressed/frame0470.jpg",
dataType: "text",
success: function(r) {
console.log(r);
}
});
to retrieve the image's base64 string (which presumably can be stored in less memory than the image object and won't be subject to firefox's image garbage collection). But how can I convert this back into a jpeg?
I don't really get the reason you want to achieve either, but you should be able to get binary data in XHR rather than confine yourself in types supplied by jQuery.
First, read MDC docs here to retrive proper binary string of the image https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Receiving_binary_data_in_older_browsers
Second, the binary string can be converted into base64 by window.btoa().
Third, base64 image string can be displayed by constructing data url. I am sure you already know how to do it.
Compare to the actual binary data, binary string cost 4x more memory since each character in the string is actually 4 bytes in memory as Javascript uses UCS-2 internally. Base64 string costs 4*1.3=5.2x more memory. Base64 data is 130% bigger than the original data.
A neat way to deal with binary data in Javascript is to work with the Blob object. But I failed to see anyway to get a Blob displayed as an image, so ...
If you want to avoid the aggressive image eviction, I think the possible approach is to paste the image to a <canvas> element and display it.
<canvas> actual comes with a built-in function toDataURL() that provide the data you want, but if you get away with the image eviction then you don't need it.