Image(base64) is getting distorted after sending to ROSserver

edit

I have a image in my HTML file that i am trying to send it to my server.

I am converting my image using Canvas to base64 string. Using following code:

  var img = new Image();
  img.src = 'image13.jpeg'
  var canvas = document.getElementById('canvas')
  var context = canvas.getContext('2d');
  img.onload = function () {
  canvas.width = img.width || img.naturalWidth;
  canvas.height = img.height || img.naturalHeight;
  dataurl = canvas.toDataURL('image/jpeg');

 #Following is the function that sends my dataurl variable to the server.
  var request = new ROSLIB.ServiceRequest({
        clientimage : {
          header: {
              seq: 1,
              stamp: "",
              frame_id: ""
            },
          format: "jpeg",
      data: dataurl}
  });
}

When i am trying to read dataurl object on my server it gets all distorted. Server Code:

def data_uri_to_cv2_img(uri):
    encoded_data = uri.split(',')[1]
    encoded_data += "=" * ((4 - len(encoded_data) % 4) % 4) 
    print encoded_data
    nparr = np.fromstring(encoded_data.decode('base64'), np.uint8)
    img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
    return img

The data my server is receiving is the something like this:

���{%�K۽��������x~�_���;m5<Qy�iw   h�n��iJ�6�)m�la���X�� 
    ��%M*R���g�խ�b������UiS��{_�ӥֺ��<������������ ���P��i)��-1n�%�x�,��
                                                                                                 ��E�B]x<�Uۃ��]^��Z�{����9�a!w�w�ӭ�����C�5�M
    ��K��- k�S
    ��E�ȁ�Wp������U8ǚ�D����vZ��u��t$���z�i�
                                                ���uj��ڙ�*f�

I am unable to figure out why this is happening. Any pointers or suggestions will be of great help. When I am trying to perform a imshow, I get the following error:

error: (-215) size.width>0 && size.height>0 in function imshow