js調用Python函數

想要實現一個功能：

• 輸入：目標檢測或者跟蹤或者車牌識別的結果以及原始圖片幀序列
• 輸出：將目標檢測的bbox框畫到圖片上以及車牌識別等文字寫到圖片上，生成結果展示視頻，進行可視化，在前端網頁中進行展示。
• 因為直接用js在圖片中畫框，寫文字以及合成視頻比較麻煩，因此考慮到直接用python實現，寫個函數讓js調用，返回生成視頻的路徑，前端獲取路徑進行展示即可

一、跑通js調用Python函數過程

參考鏈接：

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

首先將整個過程跑通，然後再來進行業務代碼的書寫

1.安裝eel及其他

pip install eel # 安裝eel

2.把python函數暴露給js

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

3.在js中引入eel,調用python函數

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

// 調用python函數
const res = await eel.my_add(3,4)();
console.log(res);
}
</script>

4.啟動python程序,為網頁開啟微型服務器

eel.init('web') ＃給出包含web文件的文件夾
eel.start('hello.html') ＃開始進入循環,自動啟動你的主頁

二、業務代碼

1.js

<script type="text/javascript">
const path = "../../";
// 輸入圖片的路徑
const imgpath = path+"img/";
// 輸出圖片的路徑
const imgout_path =path+ "out/";
// 輸出視頻的路徑
const vedio_path = path
// 輸入json文件的路徑
const resJson = "../../input.json"
async function show(imgpath, imgout_path, vedio_path, resJson){

// 調用python函數
// vedio_name 為返回的生成視頻的路徑名稱
const vedio_name = await eel.vis(imgpath, imgout_path, vedio_path, resJson)();
console.log(vedio_name);
}
// 頁面加載即運行函數
window.οnlοad = show(imgpath, imgout_path, vedio_path, resJson);
</script>

2.python函數

(1)處理輸入的結果文件 input.json

(2)將內容添加到圖片，畫矩形框+寫車牌號等

(3)將圖片合稱為視頻

 # 視頻保存
vedio_name = vedio_path+'res.mp4'
writer = cv2.VideoWriter(vedio_name,cv2.VideoWriter_fourcc('m', 'p', '4', 'v'), 25, (size[1], size[0]), True)
# **********設置幀的數量**********
# 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) # 打開文件
# print(img)
writer.write(read_img)
writer.release()

最後return 生成視頻的路徑及名稱即可。

三、遇到問題

1.運行python文件報錯 cannot import name Timer

找到報錯文件報錯行，注釋掉這一行即可

2.使用opencv在圖片上寫漢字出現亂碼情況

（1）定義一個函數

#在圖片上寫字，解決中文亂碼問題
def cv2ImgAddText(img, text, left, top, textColor=(255, 255, 255), textSize=35):
if (isinstance(img, np.ndarray)): # 判斷是否OpenCV圖片類型
img = Image.fromarray(cv2.cvtColor(img, cv2.COLOR_BGR2RGB))
# 創建一個可以在給定圖像上繪圖的對象
draw = ImageDraw.Draw(img)
# 字體的格式
fontStyle = ImageFont.truetype(
"fonts/chinese/simsun.ttc", textSize, encoding="utf-8")
# 繪制文本
draw.text((left, top), text, textColor, font=fontStyle)
# 轉換回OpenCV格式
return cv2.cvtColor(np.asarray(img), cv2.COLOR_RGB2BGR)

寫文字時調用這個函數即可

# 寫文字
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 為字體文件，我是拷貝了本地路徑下的文件到此文件夾下。