Nice, how large can the archives become? I guess there is a size limit, which may be different for different browsers.
Also, I wonder how difficult it would be to port a decompression library to asm.js.
Pack arbitrary files into PNG and access them using JavaScript
21–30 of 31 posts
Re: Pack arbitrary files into PNG and access them using JavaScript
#22Re: Pack arbitrary files into PNG and access them using JavaScript
#23I guess this would be useful with Amazon's free unlimited cloud photo storage.
A small (631 bytes) JPEG concatenated with your file of choice (preferably encrypted) accomishes what you're thinking.
But you run the risk of a ToS violating, losing your files and having your account banned.
Re: Pack arbitrary files into PNG and access them using JavaScript
#24I'm not sure what the use case for this is, but you can also add arbitrary data to PNG files by adding a custom chunk. As long as the chunk is marked as ancillary (the first letter of the chunk type is in lower case), it will not affect image decoding.
Contrarily to the appending trick that you mention, this allows you to apply PNG compression to your arbitrary data, and then make use of the browser's decompression capabilities on it.
Though that's still kind of an odd use case, since we have gzip encoding for that.
Re: Pack arbitrary files into PNG and access them using JavaScript
#25Earlier quoted context omitted.
Instead of doing $.get([remoteScript]), you inject img tags that point to prebuilt PNGs on a different server and decode them after they load. I could be wrong, but doesn't that work?
It doesn't. You can load the img tag, but the browser will not let you access the image itself from javascript, unless you have the proper CORS headers.
imgur allows any origin
Re: Pack arbitrary files into PNG and access them using JavaScript
#26Re: Pack arbitrary files into PNG and access them using JavaScript
#27> Significantly reduce the number of HTTP requests allowing fast page loads
I wonder how true this holds with HTTP/2.0, where resources are loaded in parallel over a single TCP connection.
Re: Pack arbitrary files into PNG and access them using JavaScript
#28Any ideas why I would want to do this?
I think the trick originated in demoscene size coding or possibly js5k. By encoding the script as a PNG you let the browser do the decompression and bootstrap it with some tiny piece of javascript.
Re: Pack arbitrary files into PNG and access them using JavaScript
#29The only use I see for this is for compressing files uploaded to a hosting where you can't enable gzip encoding. I already use static gzip encoding in all my deployments and I got less problems with cross-origin requests from custom-coded binary files than from images.
Most people won't find any real-world use for this, but it's cool/clever enough by itself that it's worth the author's time and effort.
Definitely. In fact it's one of the first things I considered when I started moving the mesh format of my engine from JSON to binary.
Re: Pack arbitrary files into PNG and access them using JavaScript
#30Nice, how large can the archives become? I guess there is a size limit, which may be different for different browsers. Also, I wonder how difficult it would be to port a decompression library to asm.js.
Author here!
The need appeared when I was doing my WebGL game engine and wanted to pack/compress mesh, texture, xml and any other stuff that would bloat my loading time with tons of HTTP requests!
Also the browser's native PNG decompression would be faster than any external JS lib for lossless decompression.
I limited it to a 16k x 16k PNG (but I think modern browsers can take more than that), allowing 1GB of data.