POST the image with json and receive it with flask

Thing you want to do

I want to POST the image as json and receive it in flask. However, bytes type data cannot be used as the json value, so some ingenuity is required.

I set up a server locally and tried it.

What is base64?

As mentioned above, binary data cannot be an element of json. Text data is OK.

In that case, the binary data may be converted into text data once according to a certain rule, transmitted, and then converted into the original binary data at the receiving destination.

One of the rules for converting binary data to text data is base64.

These

Explained fairly carefully.

First on the client side. The transition of data is as follows.

Import an image as a Pillow Image ⇒ Convert to bytes ⇒ Encode with base64 (still bytes) ⇒ Convert data that was bytes to str ⇒ json .dumps to json ⇒ You can safely POST with json

client.py


import requests
from PIL import Image
import json
import base64
from io import BytesIO

img = Image.open("iruka.jpeg ")

#Convert Pillow Image to bytes and then to base64
buffered = BytesIO()
img.save(buffered, format="JPEG")
img_byte = buffered.getvalue() # bytes
img_base64 = base64.b64encode(img_byte) #Base64-encoded bytes * not str

#It's still bytes so json.Convert to str to dumps(Because the json element does not support bytes type)
img_str = img_base64.decode('utf-8') # str

files = {
    "text":"hogehoge",
    "img":img_str
    }

r = requests.post("http://127.0.0.1:5000", json=json.dumps(files)) #POST to server as json

print(r.json())


>>>{'img_shape': [750, 500], 'text': 'hogehogefuga'}

Then server side. The transition of data is as follows.

Receive with json ⇒ Extract the desired data (base64-encoded text data) from json ⇒ Decode base64-encoded text data and convert it to bytes ⇒ Convert to _io.BytesIO so that it can be handled by Pillow ⇒ You can get the original Pillow Image safely

server.py


from flask import Flask, jsonify, request
from PIL import Image
import json
import base64
from io import BytesIO
import matplotlib.pyplot as plt

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    json_data = request.get_json() #Get the POSTed json
    dict_data = json.loads(json_data) #Convert json to dictionary

    img = dict_data["img"] #Take out base64# str
    img = base64.b64decode(img) #Convert image data converted to base64 to original binary data# bytes
    img = BytesIO(img) # _io.Converted to be handled by BytesIO pillow
    img = Image.open(img) 
    img_shape = img.size #Appropriately process the acquired image
    
    text = dict_data["text"] + "fuga" #Properly process with the acquired text

    #Return the processing result to the client
    response = {
        "text":text,
        "img_shape":img_shape        
        }

    return jsonify(response)

if __name__ == "__main__":
    app.debug = True
    app.run()

It was confirmed from the response of the server that the image was processed correctly.

By the way The input of base64.b64encode () is bytes and the output is bytes. The input of base64.b64decode () can be bytes or str, but the output is bytes.

reference

python --command --decode base64 from POST and use it in PIL

How to convert PIL Image.image object to base64 string? [duplicate]

Recommended Posts

POST the image with json and receive it with flask
POST variously with Python and receive with Flask
POST JSON in Python and receive it in PHP
Send and receive image data as JSON over the network with Python
POST the image selected on the website with multipart / form-data and save it to Amazon S3! !!
Return the image data with Flask of Python and draw it to the canvas element of HTML
Scraping the holojour and displaying it with CLI
Generate and post dummy image data with Django
Response the resized image using Flask and PILImage
I'm addicted to the difference in how Flask and Django receive JSON data
Parse and visualize JSON (Web application ⑤ with Python + Flask)
Read json file with Python, format it, and output json
Build an image classification model explosively with Azure Custom Vision and implement it with Flask
CNN with keras Try it with the image you picked up
[pyqtgraph] Add region to the graph and link it with the graph region
Image segmentation with scikit-image and scikit-learn
Run the app with Flask + Heroku
Grant an access token with the curl command and POST the API
JSON encoding and decoding with python
Basic authentication and Digest authentication with Flask
Take an image with Pepper and display it on your tablet
[Python3] Save the mean and covariance matrix in json with pandas
Login with PycURL and receive response
Try blurring the image with opencv2
Judge the extension and download the image
Post bulletin board creation with flask
Image upload function with Vue.js + Flask
I ran GhostScript with python, split the PDF into pages, and converted it to a JPEG image.
Put your own image data in Deep Learning and play with it
Scrap the published csv with Github Action and publish it on Github Pages
Extract the TOP command result with USER and output it as CSV
I set the environment variable with Docker and displayed it in Python
I vectorized the chord of the song with word2vec and visualized it with t-SNE
Convert the spreadsheet to CSV and upload it to Cloud Storage with Cloud Functions
Image the pdf file and stamp all pages with confidential stamps (images).
Start the webcam to take a still image and save it locally
[python] Send the image captured from the webcam to the server and save it
Face image inference using Flask and TensorFlow
Right-click the image → realize "Compress with TinyPNG"
I tried playing with the image with Pillow
Find it in the procession and edit it
Add lines and text on the image
(For myself) Flask_3 (form, POST and GET)
Dispersion with Python's standard library and Pillow Find the RGB standard deviation of the image and determine if it is monochromatic
GAE --With Python, rotate the image based on the rotation information of EXIF and upload it to Cloud Storage.
Make a thermometer with Raspberry Pi and make it visible on the browser Part 3
Let's play with Python Receive and save / display the text of the input form
Extract the color of the object in the image with Mask R-CNN and K-Means clustering
Somehow the code I wrote worked and I was impressed, so I will post it
Use Pillow to make the image transparent and overlay only part of it
Read the image posted by flask so that it can be handled by opencv
It is very fast when you receive the Earthquake Early Warning on the strong motion monitor and handle it in JSON.
I tried "smoothing" the image with Python + OpenCV
[Python] I introduced Word2Vec and played with it.
Crop the image to rounded corners with pythonista
Image characters and post to slack (python slackbot)
I tried "differentiating" the image with Python + OpenCV
Read JSON with Python and output as CSV
Create an image composition app with Flask + Pillow
Determine the numbers in the image taken with the webcam
Detect folders with the same image in ImageHash