How to convert BLOB to image using python

Question

I need to send an image from client to server using blob

I have converted a image to BLOB in jquery (client side) and sending the blob to python flask (server side) the problem is, I can't recreate image from BLOB. I have tried the following code in python but failed to get the image

Jquery code to convert image to blob:

function changeFile() {
     var file = this.files[0];
     var reader = new FileReader();
     reader.addEventListener('load', readFile);
     reader.readAsText(file);
}

function readFile(event) {
     document.body.textContent = event.target.result;
     console.log(event.target.result);
     appendFileAndSubmit(event.target.result);
}


function appendFileAndSubmit(imageUrl){
     var ImageURL = imageUrl
     var data = {
          'logo':ImageURL
          }
             $.ajax({
                        url: 'http://sdsdss/User/imgBlob',
                        method: 'POST',
                        dataType : 'json',
                        data: JSON.stringify(data),
                        contentType: 'application/json; charset=utf-8'
                    }).done(function(response){    
                        var datas = JSON.parse(response);
                        console.log(datas);
                    });
                }
document.getElementById("inp").addEventListener("change", changeFile);

Python Code: To recreate BLOB to image

function getImage(self):
     reqData = json.loads(request.data)
     Logo = reqData['logo']
     png_recovered = base64.decodestring(Logo)
     f = open("temp.png", "w")
     f.write(png_recovered)
     f.close()

Endless · Accepted Answer · 2020-08-26 08:47:33Z

1

Don't read the file as text, You are dealing with binary data.
Best way to transfer binary with json is if you read the file as base64 instead reader.readAsDataURL(file) This will encode all bytes to a web safe base64 string (no slash or plus). Then you have to decode it with python as well.
I discourage you from using json when dealing with file transfer as it will increase the bandwidth with ~3 times as much (not to mention the time it also takes to decode and encode it back and forth) For this I recommend you instead use FormData.

var fd = new FormData()
fd.append('logo', files[0])

$.ajax({
  url: 'http://sdsdss/User/imgBlob',
  method: 'POST',
  data: fd,
  // Setting false prevent jQuery from transforming the data
  processData: false,
  contentType: false
}).then(function(response) {
  console.log(JSON.parse(response))
})

or simpler yet, just post the file without any formdata, json or extra fields if they are not necessary.

fetch(uploudUrl, { method 'PUT', body: this.files[0] })

edited Aug 26, 2020 at 8:47

answered Oct 26, 2018 at 11:20

Endless

38.8k14 gold badges118 silver badges138 bronze badges

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

1 Comment

vimal kumar Over a year ago

actually am sending image to api so json is the general structure am following for all the clients i can't write form data for this particular image..i will try with base64 string

Collectives™ on Stack Overflow

How to convert BLOB to image using python

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related