Here is a small fiddle that I've done to convert images to byte array.
I use it to create icons for my projects with Arduino and similar.

The code is a mess but the part that convert the image is pretty simple. Using the Canvas object I was able to get the pixels of the image.
The getPixelData() gives you back an array formatted in this way:

  var pixelarray = [pixel1GreenVal, pixel1RedVal, pixel1BlueVal, pixel1AlphaVal,...];

I've cycled the array in steps of 4, getting the average value of the colors (greyscale filter), and using a threshold value I converted the image to monochrome (B/W).

var threshold = document.getElementById('threshold').value;
elem = document.getElementById('canvas')
context = elem.getContext('2d')
var img = context.getImageData(0,0,canvas.width,canvas.height)
var threshold = document.getElementById('threshold').value;
for(var i=0; i<;i=i+4){    
  var avg = ([i][i+1] +[i+2])/3
  if(avg>threshold){[i] = 255[i+1] = 255[i+2] = 255        
  }else{[i] = 0[i+1] = 0[i+2] = 0        
var elem = document.getElementById("canvas2");
var ctx = elem.getContext("2d");

from this point on, creating the array with 0 and 1 and converting it to a string was trivial.

for(var i=0; i<;i=i+4){    
   var avg = ([i][i+1] +[i+2])
   if(avg>threshold) str.push(0)
     else str.push(1)
var s = 'static const unsigned char PROGMEM changeMe[] ={B';
for(var i=0;i<str.length;i++){   
   if(i!=0 && i%8==0) s+=', B'

JS Bin on

With the same process is possible also to make a beautiful ASCII webcam :)

Here are some examples:



—Read This Next—

Wemos D1 Mini Pinout

The Wemos D1 mini is a really cool microcontroller. It costs only £5 and provides integrated WiFi bng connectivity and 13 digital I/O and 1
—You Might Enjoy—

Linux - Freeing RAM without rebooting

Simple command to free RAM on linux without rebooting #!/bin/bash sync; echo 1 > /proc/sys/vm/drop_caches; echo 2 > /proc/sys/vm/drop_