Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Compressing base64 data uri images

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)

like image 918
David Nguyen Avatar asked Mar 11 '14 14:03

David Nguyen


People also ask

Does base64 encoding compress data?

base64-encoded data doesn't compress well, it is 2 times larger than the unencoded compressed file.

Does base64 compress images?

Base64 is a binary-to-text encoding scheme. It represents binary data in a printable ASCII string format by translating it into a radix-64 representation. Base64 encoding is commonly used when there is a need to transmit binary data over media. Here we are going to use Canvas approach to compress image.

Is Uri a base64?

A data URI is a base64 encoded string that represents a file. Getting the contents of a file as a string means that you can directly embed the data within your HTML or CSS code. When the browser encounters a data URI in your code, it's able to decode the data and construct the original file.

Can base64 string compress?

1 Answer. Show activity on this post. Base64 is already encoded in a way which does not suit most compression algorithms - see Why does base64-encoded data compress so poorly? for details. You will want to compress the original binary data and then base64 the compressed data, or don't bother converting to base64 at all ...


1 Answers

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); 
like image 106
Koen. Avatar answered Sep 23 '22 08:09

Koen.