Sending base64 image to Python from JavaScript

Question

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?

Answer 1

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);
}