base64 image from flask to nativescript

Question

I am sending a request to a flask server and expecting the server to respond with a base64 Image, I am trying to show this base64 encoding in nativescript app but failing.

server code

@app.route("/", methods=['POST', 'OPTIONS'])
def index():
    image = base64.b64decode(request.json.get('img'))
    image = np.array(Image.open(io.BytesIO(image)))
    print(image.shape)
    return base64.b64encode(image) # I know this returns the same image

client code, I am using nativescript-vue

ImageSourceModule.ImageSource.fromAsset(this.src)
  .then(src => src.toBase64String("jpg"))
  .then(base64 => {
    return axios.post(
      "http://192.168.1.8:5000/",
      { img: base64 },
      {
        headers: { "Content-Type": "application/json" }
      }
    );
  })
  .then(res => {
    let img = ImageSourceModule.ImageSource.fromBase64Sync(res.data); // also tried the async version
    this.converted = img;
  })
  .catch(e => console.log(e));

in the template

<Image :src="converted" ref="converted" margin="10" stretch="none" />

when I console log img it says null. any ideas?

Answer 1

Found the solution, the numpy array needs to be converted to PIL Image first then bytes then convert it to base64 string

input_image = base64.b64decode(request.json.get('img'))
input_array = np.array(Image.open(io.BytesIO(input_image)))
output_img = Image.fromarray(input_array, 'RGB')
buffer = io.BytesIO()
output_img.save(buffer, format="JPEG")
response = base64.b64encode(buffer.getvalue())