javascript - Compressing base64 data uri images

Question

Problem

I'm creating multiple charts that are then sent to the server to create a PDF. This data can get large.

Question

What is the best way to compress and send the image data to the server

Background

The charts I'm creating are fairly complex, to save myself the headache all of this is converted to a canvas where the base64 data uri is generated. Currently the data uri(s) are posted to the server to handle the processing. Posted info can get fairly large at around 400-600kb each for a small chart and 12mb for the largest chart.

The charts are org charts that can be manipulated/reordered.

Is there a better method of compressing these strings before sending it back up to the server?

Research

Some things I've check out:

https://github.com/brunobar79/J-I-C/blob/master/src/JIC.js (does not look like an option just resizes)

http://pastebin.com/MhJZBsqW (looks interesting)

But references external libraries that I cannot find: C_H_Image Lib_MinifyJpeg

https://code.google.com/p/jslzjb/source/browse/trunk/Iuppiter.js?r=2 (looks like this could work but relies on decompression on server side)

Answer 1

Maybe string compression is the solution for you. This converts the data to byte arrays.

There are multiple implementations and algorithms around, for instance

• LZMA-JS A standalone JavaScript implementation of the Lempel-Ziv-Markov chain (LZMA) compression algorithm.

  my_lzma = new LZMA("./lzma_worker.js");
  my_lzma.compress("This is my compression test.", 1, function on_compress_complete(result) {
      console.log("Compressed: " + result);
      my_lzma.decompress(result, function on_decompress_complete(result) {
          console.log("Decompressed: " + result);
      }, function on_decompress_progress_update(percent) {
          console.log("Decompressing: " + (percent * 100) + "%");
      });
  }, function on_compress_progress_update(percent) {
      console.log("Compressing: " + (percent * 100) + "%");
  });
  

• lz-string: JavaScript compression, fast!

  var str = "This is my compression test.";
  console.log("Size of sample is: " + str.length);
  var compressed = LZString.compress(str);
  console.log("Size of compressed sample is: " + compressed.length);
  str = LZString.decompress(compressed);
  console.log("Sample is: " + str);