I am working on processing frames of JavaScript based racing game on Python. I am using Tornado Web Server on Python. The game has 480x360 resolution. I get image from canvas in each frame and I rescale it before sending web server.
But in Python, I am not be able to decode image. Here, my code is
In JavaScript:
function encode() {
var imageData = ctx.getImageData(0, 0, 360, 480);
var downsized = "";
for (var i = 0; i < imageData.data.length; i++) {
var d = imageData.data[i];
downsized += String.fromCharCode(d);
}
return downsized;
}
function processFrame(foobaz) {
downsizeImage.src = canvas.toDataURL()
downsizeCtx.drawImage(downsizeImage, 0, 0, 84, 84)
var imageData = downsizeCtx.getImageData(0, 0, 84, 84);
var counter = 0;
var downsized = ""
for (var i = 0; i < imageData.data.length; i++) {
var d = imageData.data[i];
if (i % 4 == 3){
continue;
}
else{
downsized += String.fromCharCode(Math.round(d));
}
}
return btoa(downsized);
}
Then, I send rescaled image to Python
$.ajax({
type: 'POST',
url: '/frame?telemetry=' + JSON.stringify({
all_data: [all_data],
terminal: true,
was_start: WAS_START,
action: [keyLeft, keyRight, keyFaster, keySlower]
}),
data: processFrame(),
contentType: "application/json"
}).done(function(data) {
location.reload();
});
In Python:
class FrameHandler(tornado.web.RequestHandler):
def post(self):
global speed_data, start, position_data
fulldata = self.request.body
ar = np.fromstring(base64.decodestring(self.request.body), dtype=np.uint8)
img = ar.reshape(84, 84, 3)
In debugging mode, fulldata variable has value like "AAAAAAAAAAAAAAAAAA..." and decoded array "ar" only 0 values in it.
Where am I missing?
I made some changes in my code. Here, I am not downsizing image anymore. That solved the problem. Here is the solution.
var imageData = ctx.getImageData(85, 10, 300, 300);
var downsized = "";
for (var i = 0; i < imageData.data.length; i++) {
var d = imageData.data[i];
if (i % 4 == 3){
continue;
}
else{
downsized += String.fromCharCode(Math.round(d));
}
}
return btoa(downsized);
}