JS calls Python functions

Want to implement a function ：

• Input ： The results of target detection or tracking or license plate recognition and the original picture frame sequence
• Output ： Target detection bbox Frame the picture and write words such as license plate recognition on the picture , Generate result display video , Visualizing , Display in the front page .
• Because I use it directly js Draw a frame in the picture , Writing text and synthesizing videos are troublesome , So consider using python Realization , Write a function to let js call , Return the path to generate the video , The front end obtains the path and displays it

One 、 Run through js call Python Function process

Reference link ：

https://blog.csdn.net/brook_/article/details/80774393

First, run through the whole process , Then write the business code

1. install eel And others

pip install eel # install eel

2. hold python Function exposed to js

@eel.expose
def my_add(a, b):
return a+b

3. stay js Introduction in eel, call python function

 <script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript">
async function test(){

// call python function 
const res = await eel.my_add(3,4)();
console.log(res);
}
</script>

4. start-up python Program , Open microserver for web pages

eel.init('web') ＃ Give include web File folder
eel.start('hello.html') ＃ Start to enter the cycle , Start your homepage automatically

Two 、 Business code

1.js

<script type="text/javascript">
const path = "../../";
// Enter the path of the picture 
const imgpath = path+"img/";
// The output path of the picture 
const imgout_path =path+ "out/";
// Path to output video 
const vedio_path = path
// Input json Path to file 
const resJson = "../../input.json"
async function show(imgpath, imgout_path, vedio_path, resJson){

// call python function 
// vedio_name The path name of the generated video for the return 
const vedio_name = await eel.vis(imgpath, imgout_path, vedio_path, resJson)();
console.log(vedio_name);
}
// Run the function as soon as the page is loaded 
window.οnlοad = show(imgpath, imgout_path, vedio_path, resJson);
</script>

2.python function

(1) Process the input result file input.json

(2) Add content to the picture , Draw a rectangle + Write the license plate number, etc

(3) Collectively, pictures are called videos

 # Video save 
vedio_name = vedio_path+'res.mp4'
writer = cv2.VideoWriter(vedio_name,cv2.VideoWriter_fourcc('m', 'p', '4', 'v'), 25, (size[1], size[0]), True)
# ********** Set the number of frames **********
# total_frame = len(os.listdir(imgout_path))
# print(total_frame)
for i in imgout_files:
if i.endswith('.jpg'):
read_img = cv2.imread(imgout_path + '/' + i, cv2.IMREAD_COLOR) # Open file 
# print(img)
writer.write(read_img)
writer.release()

Last return The path and name of the generated video .

3、 ... and 、 Have a problem

1. function python File error cannot import name Timer

Find the error line in the error file , Just comment out the line

2. Use opencv Writing Chinese characters on the picture is garbled

（1） Define a function

# Write on the picture , Solve the problem of Chinese garbled code 
def cv2ImgAddText(img, text, left, top, textColor=(255, 255, 255), textSize=35):
if (isinstance(img, np.ndarray)): # Determine whether OpenCV Picture type 
img = Image.fromarray(cv2.cvtColor(img, cv2.COLOR_BGR2RGB))
# Create an object that can be drawn on a given image 
draw = ImageDraw.Draw(img)
# The format of the font 
fontStyle = ImageFont.truetype(
"fonts/chinese/simsun.ttc", textSize, encoding="utf-8")
# Draw text 
draw.text((left, top), text, textColor, font=fontStyle)
# Convert back to OpenCV Format 
return cv2.cvtColor(np.asarray(img), cv2.COLOR_RGB2BGR)

Call this function when writing text

# Write words 
img = cv2ImgAddText(img,show_list[img_name][rec][1] , show_list[img_name][rec][0][0], show_list[img_name][rec][0][1], (0, 255, 0), 40)

fonts/chinese/simsun.ttc Is a font file , I copied the files under the local path to this folder .