Interpret binary string as image in Python, generated by Javascript native method

Question

    var oReq = new XMLHttpRequest();
    var reader = new FileReader();

    reader.onload = function(e) {
      var rawData = reader.result;
      oReq.open("POST", '/upload', true);
      oReq.send(rawData);
      console.log(rawData);
    }

    reader.readAsBinaryString(postObj);
    // postObj is an image who's src is set to a data uri, taken via a webcam.

console.log(rawData) yields ==>

"PNG


IHDRÈÜÇ IDATx^d½idizw"##rÏ¬}ëîªÞfÃ!%2
ø£üølpµ0ù Q&É©¡,Ú2l²!Ã¦SeÃ$Y-ÉÎLïKuí{îáëºófe³§¦*3#Nó¾Ïr?÷³¼úOþÓùÉÂ tóne¸Øm.»ÙhÐtÃÅQ7<w''³nÎ¿g³Y·Èkóãn<Xì§G]·²Ø
ç]·8wÇ\å¨;á5vÁ°Ì»E¾?æ÷ywtÒuó¯ù{>Ïám]ÇëF£Qwt|\ßó5ä³NæÜÇ°^{rÂ¿ùÜÁ|¡;>:êón0âß¼gûã6rm_ëgçõü4[vG¼gaa!?_à5#~³0\èxcß}Â}ú|ÜÓóóÅ!Ï=?â{®ã½ó^í½v'ü×úþÞ/×ñÏ}P®}Â÷Ý¸;9fX¨?[àUÇ|?à^|þáb=çòÉ¸[æ·¬@7q]>giÜqÓ~@oq´èMdY4í3-.ùÈzÿüÌºÍy
7Ä½ÖºØ¿\Ü6¯õ:Ü ß·5r-|ºv½½ôú¬w¶ìõáþ<{/íuí{ÞÎÚy¯Gì%kÎ}NfÓÚÞã5Ý¶ÏÞÔr×
ø«Õï½¯k¯õï</ëïçz¬ïso§ÙsÆ³ü5öß»{ÛÝádÌñö ïgÍÿù¿üWÝÆ¹ÝøüX7øK?ùó    ê¶/!Ë«ÝÂxÔ"
G.²Éxbæ]ñg@úýgé£Þ;¿ThÆ³/ùòû(D¿Ã>2Þ-ð³7¯18"P<=ç>GSr±;r\à;³°<6ÎòZNAázndûûtù¼1ÇVGÁ¼^vÜ¼\3ÚÆu¸9×g]ÉñA   VÂ°0óîÍ£TÃY½ïdaM">ÆhÎF9ú¿](3Â¯¢xeÜõt
¢DÞN¾E¾oÈEy×q®?ÂÀ»z=Bó|,¯JáæzíýÞ¯ÿöï&äM!rÏ¼WóQÛ^ÏÛÖ5÷Ü¤ûåÏ¸ÛüûÃkôF©]ß¿óÜ1F¤üNÃ«ÍsM¯Qü²úYX:f¯DSßÌõ4D1eTÛûüvÿþlrpÐM'SÇuòµÈïù?øî½>è~â'~¢ü$

How can I interpret this in Python? On the server, this data shows up as:

'...\x7f\xc2\xb4r\xc2\x87\x1c\xc2\xaa\n-\xc2\x9c\xc2\xa6QF\xc2\xac\xc2\xb0tS\xc3\xa4\xc2\xb0;\xc3\x8cisL@\xc3\x98\xc2\x94E\xc3\x94\xc2\xb8Bz\xc3\xb0\xc3\xa9\xc2\xaa#8\xc2\x90\xc3\xbb\xc3\xa5>\xc3\xbaO\xc2\xa8\xc3\x81H\xc3\x91\xc2\xaf:i\xc2\x8a\xc2\x926\xc2\x8b\xc2\x81\xc3\xbc\xc3\xa1Y\xc3\x93\xc2\x9b\xc2\xbat\xc2\x8f\xc3\x9e~\xc2\xa3PH4\x02_\x04\xc2\xbf\xc2\x92\xc2\xb7\xc3\xad\xc2\x8f\xc3\x9e\xc3\xbf\xc2\xb8<\xc2\x91V\xc3\xa0\xc3\x8b\x1f\xc3\x88\xc3\x9f\xc2\xa2>)\x1d\xc3\x94eY=\xc3\x8ct\xc2\xa9+L^7\xc2\xa2I\xc3\x84\xc2\xba\x03\xc3\xb5!1f\xc3\x97\xc3\x81\xc3\xbfD\xc3\x87\xc3\xb7\x06\xc2\xaa\xc3\xafcz\xc3\xad(\xc3\xb5\xc2\xab\xc3\x96\xc3\xb5<\xc3\x8e\xc2\xab\x08\xc3\x81\xc2\x88\x0b\xc3\x8a;\xc3\x8e!v\xc3\x84\xc2\xb1?\xc2\x8bVn\x19t\xc3\x80\xc2\x8bT`:\x1c\xc3\x8b\xc2\x99\xc3\xb2\xc3\x9c\xc3\xbf\x0fCsXi\xc3\xa6z\xc3\xb3l\x00\x00\x00\x00IEND\xc2\xaeB`\xc2\x82'

Writing this to file as a PNG yields an invalid PNG. Any guidance on saving the image would be helpful.

Martin Konecny · Accepted Answer · 2014-06-12 04:06:54Z

1

You will need to convert your image's binary representation into Base64 before uploading - this makes it safe to work with when transferring data over HTTP.

When you receive the Base64 encoded image server-side, you can convert it back to binary, and write this to a file.

Client side code:

To convert to Base64, you need to use

fileReader.readAsDataURL( fileObject )

this automatically represents your data in a safe to upload via HTTP format.

Server side code:

import base64
coded_string = '''Q5YACgA...'''
binary = base64.b64decode(coded_string)
# now write binary to file...

answered Jun 12, 2014 at 4:06

Martin Konecny

59.9k20 gold badges144 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zallarak Over a year ago

It converts to binary, but the saved file is not readable as a PNG.

zallarak Over a year ago

Just tried that, it also produces something that does not work.

guest · Accepted Answer · 2014-06-12 04:09:20Z

0

open('/path/to/new_file.png', 'wb').write(rawData)

answered Jun 12, 2014 at 4:09

guest

1

2 Comments

zallarak Over a year ago

This is exactly what I tried and it was unable to be opened.

guest Over a year ago

stackoverflow.com/questions/7431365/…

zallarak · Accepted Answer · 2014-06-12 22:50:35Z

0

On the browser:

// Client Side:
var xhr = new XMLHttpRequest();
xhr.open('POST', uploadUrl);
xhr.send(base64EncodedItem);

On the server (I am using Flask/Python 2.x)

# Server Side:
import re
import uuid

# Obtain the base64 string
image_string = request.data

image_string = re.search(r'base64,(.*)', image_string).group(1)

# Generate a file name.
# We can assume PNG format in my specific implementation, but you could search
# the image_string variable to detect filetype.
output = open(str(uuid.uuid4()) + '.png', 'wb')
output.write(image_string.decode('base64'))
output.close()

This worked for me. Hope it helps others.

answered Jun 12, 2014 at 22:50

zallarak

5,5758 gold badges45 silver badges54 bronze badges

Collectives™ on Stack Overflow

Interpret binary string as image in Python, generated by Javascript native method

3 Answers 3

Client side code:

Server side code:

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Client side code:

Server side code:

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related