Encoding binary data or text into base64
HTML5 support for binary data is through an ArrayBuffer object, the related type arrays. When it comes to transmitting that data, usually the way to do this is via base64. This is used mostly for dealing with textual data but with the rise of the usage of Data URI, base64 becomes more and more relevant. In this recipe, will see how to encode data using this scheme.
How to do it...
We will create an HTML file where we will use a canvas element, which will generate some data that will get encoded into base64:
In order to have binary data, we will create an image using canvas, so we add a
canvaselement:<!doctype html> <html> <head> <meta charset="utf-8"> <title>Binary data to Base64</title> </head> <body> <canvas id="myCanvas" width="100" height="100"></canvas>We can have some input field that could be used to show the text encoding:
<input type="text" id="text" placeholder...
