Image(base64) is getting distorted after sending to ROSserver

asked 2018-08-20 22:35:33 -0500

mpenmet gravatar image

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�,��
    ��K��- k�S

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
edit retag flag offensive close merge delete


I'm not sure, but perhaps #q247483 and/or #q252548 is related.

And #q244562 (but you'd already found that one).

gvdhoorn gravatar image gvdhoorn  ( 2018-08-21 01:11:24 -0500 )edit