Compressing base64 data uri images

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 …

Read more

Why use data URI scheme?

According to Wikipedia: Advantages: HTTP request and header traffic is not required for embedded data, so data URIs consume less bandwidth whenever the overhead of encoding the inline content as a data URI is smaller than the HTTP overhead. For example, the required base64 encoding for an image 600 bytes long would be 800 bytes, …

Read more

PHP Data-URI to file

A quick look at the PHP manual yields the following: If you want to save data that is derived from a Javascript canvas.toDataURL() function, you have to convert blanks into plusses. If you do not do that, the decoded data is corrupted: $encodedData = str_replace(‘ ‘,’+’,$encodedData); $decodedData = base64_decode($encodedData);

How do you base-64 encode a PNG image for use in a data-uri in a CSS file?

This should do it in Python: import base64 binary_fc = open(filepath, ‘rb’).read() # fc aka file_content base64_utf8_str = base64.b64encode(binary_fc).decode(‘utf-8’) ext = filepath.split(‘.’)[-1] dataurl = f’data:image/{ext};base64,{base64_utf8_str}’ Thanks to @cnst comment, we need the prefix data:image/{ext};base64, Thanks to @ramazanpolat answer, we need the decode(‘utf-8’)

How to create a Web Worker from a string

Summary blob: for Chrome 8+, Firefox 6+, Safari 6.0+, Opera 15+ data:application/javascript for Opera 10.60 – 12 eval otherwise (IE 10+) URL.createObjectURL(<Blob blob>) can be used to create a Web worker from a string. The blob can be created using the BlobBuilder API deprecated or the Blob constructor. Demo: http://jsfiddle.net/uqcFM/49/ // URL.createObjectURL window.URL = window.URL …

Read more