For this assignment I was most interested in understanding how image data was encoded into the base64 format. I spent a great deal of time attempting to understand exactly how this was done so that I could alter the image pixel data with code. So far I’ve been unsuccessful, and I have no idea why my current code doesn’t work, but perhaps I’m close, or maybe I’ve led myself completely astray.
First of all I learned that images are a binary data format, meaning the color of each of its pixels can be interpreted via a 1 or 0, (black or white), but in this case the png I am sending as base64 is not just 1 bit per pixel but rather 24 (I think), meaning there are 24 bits being used to represent a whole spectrum of rgb values. Knowing this, I then read up on how base64 encodes such binary data. The way I understand it is that the image takes the binary data in 24-bit chunks and divides each of those into four 6-bit chunks and assigns each of those 6-bits (which has 64 possible values) to an ascii character based on the base64 index table. In the end the long ascii string representing all the data in the image is “padded” with = or == to indicate whether the remainder of bits in the divided up binary image is either 1 bit or 2 bits.
So in order for me to alter the pixel data I thought I’d need to
- Decode it from base64 back to raw binary
- Do stuff to the binary (here I applied a random shuffle function)
- Encode it back to base64
I am able to do this successfully, except that the resulting base64 data just returns a broken image. I’m not sure why this would happen assuming the new base64 data should contain the same exact number of bits (right?). I also made sure that the final base64 string begins with `data:image/png;base64,` and ends with an = or ==. Here’s the corresponding code:
index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="skrypt.js"></script>
<style>
#imgcontainer {
position:relative;
float:left;
width:100%;
height:100%;
margin:0 auto;
border:solid 1px #000;
}
#imagecontainer img{
position:relative;
float:left;
}
#txtbox{
width:100%;
word-wrap: break-word;
}
</style>
</head>
<style>
canvas{
border:solid 1px #000;
}
</style>
<body>
<video id="thevideo" width="320" height="240"></video>
<canvas id="thecanvas" width="320" height="240" style="display:none"></canvas>
<div id="imgcontainer">
<img id="receive" width="320" height="240">
</div>
</body>
</html>
skrypt.js:
// HTTP Portion
// var http = require('http');
var https = require('https');
var fs = require('fs'); // Using the filesystem module
// var httpServer = http.createServer(requestHandler);
const options = {
key: fs.readFileSync('my-key.pem'),
cert: fs.readFileSync('my-cert.pem')
};
var httpServer = https.createServer(options, requestHandler);
var url = require('url');
httpServer.listen(8080);
function requestHandler(req, res) {
var parsedUrl = url.parse(req.url);
console.log("The Request is: " + parsedUrl.pathname);
fs.readFile(__dirname + parsedUrl.pathname,
// Callback function for reading
function(err, data) {
// if there is an error
if (err) {
res.writeHead(500);
return res.end('Error loading ' + parsedUrl.pathname);
}
// Otherwise, send the data, the contents of the file
res.writeHead(200);
res.end(data);
}
);
}
// WebSocket Portion
// WebSockets work with the HTTP server
var io = require('socket.io').listen(httpServer);
// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
// We are given a websocket object in our function
function(socket) {
console.log("We have a new client: " + socket.id);
// When this user emits, client side: socket.emit('otherevent',some data);
socket.on('image', function(data) {
// Data comes in as whatever was sent, including objects
console.log("Received at server: " + data);
var buf = Buffer.from(data, 'base64'); // Ta-da //encode the base64 to binary?
// //turn buffer object array into uint8 array
var uint8 = new Uint8Array(buf);
console.log("uint8 array: " + uint8);
// //re-sort binary array
var arr = uint8;
var sortedArr = shuffle(arr);
console.log("sorted: " + sortedArr);
//turn back into base64
var newB64str = (new Buffer(sortedArr)).toString("base64");
console.log("newB64str = " + newB64str);
//try adding another `=` to end of string
var finalB64Str = newB64str + "=";
socket.broadcast.emit('image', finalB64Str); //send to all except sender
});
socket.on('disconnect', function() {
console.log("Client has disconnected " + socket.id);
});
}
);
function shuffle(array) { //https://stackoverflow.com/a/2450976/1757149
var currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
server.js (this is where it’s all done):
// HTTP Portion
// var http = require('http');
var https = require('https');
var fs = require('fs'); // Using the filesystem module
// var httpServer = http.createServer(requestHandler);
const options = {
key: fs.readFileSync('my-key.pem'),
cert: fs.readFileSync('my-cert.pem')
};
var httpServer = https.createServer(options, requestHandler);
var url = require('url');
httpServer.listen(8080);
function requestHandler(req, res) {
var parsedUrl = url.parse(req.url);
console.log("The Request is: " + parsedUrl.pathname);
fs.readFile(__dirname + parsedUrl.pathname,
// Callback function for reading
function(err, data) {
// if there is an error
if (err) {
res.writeHead(500);
return res.end('Error loading ' + parsedUrl.pathname);
}
// Otherwise, send the data, the contents of the file
res.writeHead(200);
res.end(data);
}
);
}
// WebSocket Portion
// WebSockets work with the HTTP server
var io = require('socket.io').listen(httpServer);
// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
// We are given a websocket object in our function
function(socket) {
console.log("We have a new client: " + socket.id);
// When this user emits, client side: socket.emit('otherevent',some data);
socket.on('image', function(data) {
// Data comes in as whatever was sent, including objects
console.log("Received at server: " + data);
var buf = Buffer.from(data, 'base64'); // Ta-da //encode the base64 to binary?
// //turn buffer object array into uint8 array
var uint8 = new Uint8Array(buf);
console.log("uint8 array: " + uint8);
// //re-sort binary array
var arr = uint8;
var sortedArr = shuffle(arr);
console.log("sorted: " + sortedArr);
//turn back into base64
var newB64str = (new Buffer(sortedArr)).toString("base64");
console.log("newB64str = " + newB64str);
//try adding another `=` to end of string
var finalB64Str = newB64str + "=";
socket.broadcast.emit('image', finalB64Str); //send to all except sender
});
socket.on('disconnect', function() {
console.log("Client has disconnected " + socket.id);
});
}
);
function shuffle(array) { //https://stackoverflow.com/a/2450976/1757149
var currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
I also attempted to perform the shuffle to the base64 encoding itself (without transforming to binary first):
// HTTP Portion
// var http = require('http');
var https = require('https');
var fs = require('fs'); // Using the filesystem module
// var httpServer = http.createServer(requestHandler);
const options = {
key: fs.readFileSync('my-key.pem'),
cert: fs.readFileSync('my-cert.pem')
};
var httpServer = https.createServer(options, requestHandler);
var url = require('url');
httpServer.listen(8080);
function requestHandler(req, res) {
var parsedUrl = url.parse(req.url);
console.log("The Request is: " + parsedUrl.pathname);
fs.readFile(__dirname + parsedUrl.pathname,
// Callback function for reading
function(err, data) {
// if there is an error
if (err) {
res.writeHead(500);
return res.end('Error loading ' + parsedUrl.pathname);
}
// Otherwise, send the data, the contents of the file
res.writeHead(200);
res.end(data);
}
);
}
// WebSocket Portion
// WebSockets work with the HTTP server
var io = require('socket.io').listen(httpServer);
// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
// We are given a websocket object in our function
function(socket) {
console.log("We have a new client: " + socket.id);
// When this user emits, client side: socket.emit('otherevent',some data);
socket.on('image', function(data) {
// Data comes in as whatever was sent, including objects
console.log("Received at server: " + data);
var slicedData = data.slice(22); //slice off data:image/png;base64,
console.log("sliced data: " + slicedData);
var b64string, numEquals;
if (slicedData.length - 2 === "=") {
b64string = slicedData.substr(0, slicedData.length - 2); //remove last 2 `==`
numEquals = 2;
} else {
b64string = slicedData.substr(0, slicedData.length - 1); //remove last `=`
numEquals = 1;
}
console.log("sliced data without == : " + b64string);
var b64array = Array.from(b64string);
var shuffledb64array = shuffle(b64array);
var newB64str = shuffledb64array.join('');
console.log("newB64str: " + newB64str);
//try adding another `=` to end of string
var finalB64Str;
if (numEquals == 1) {
finalB64Str = newB64str + "=";
} else if (numEquals == 2) {
finalB64Str = newB64str + "==";
} else {
console.log("error calculating number of equal signs");
}
socket.broadcast.emit('image', finalB64Str); //send to all except sender
});
socket.on('disconnect', function() {
console.log("Client has disconnected " + socket.id);
});
}
);
function shuffle(array) { //via https://stackoverflow.com/a/2450976/1757149
var currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
