位置: IT常識 - 正文
yolov5部署+微信小程序前端展示(yolov5部署微信小程序)
編輯：rootadmin推薦整理分享yolov5部署+微信小程序前端展示(yolov5部署微信小程序)，希望有所幫助，僅作參考，歡迎閱讀內(nèi)容。
文章相關(guān)熱門搜索詞:yolov4部署,yolov3部署,yolov5部署到mcu,yolov5搭建,yolov5部署到mcu,yolov3部署,yolov5部署到mcu,yolov5部署到mcu,內(nèi)容如對您有幫助，希望把文章鏈接給更多的朋友！
分為yolov5項目部署和微信小程序兩部分，先介紹微信小程序前端展示+flask后端，之后介紹項目部署這部分。
一、先上效果圖1. 點(diǎn)擊選擇圖片，調(diào)用攝像頭選擇圖片
2.選擇圖片之后，點(diǎn)擊開始檢測，然后返回結(jié)果
????????
?二、前端代碼wxml文件：
view class="container"> <view> <image src="{{avatarUrl}}" class=".img" bindtap="imgClick"></image> <button bindtap="chooseimg" class=".btn_select">選擇圖片</button> <button form-type="submit" class=".btn_submit" bindtap="submitimg">開始檢測</button> </view> <view class="text-container"> <view>{{name_and_nums}}</view> <view class="text" wx:for="{{names}}">{{item.name}}: {{item.value}} </view> </view> </view>
js文件，分為兩部分，一部分是調(diào)用攝像頭，另一部分是圖片檢測
1. 數(shù)據(jù)定義：
data: { avatarUrl: 'res.png', base64imgurl: null, name_num: '', names: [], name_and_nums: '' },2. 調(diào)用攝像頭，使用微信小程序中的wx.chooseImage接口,并使用wx.setStorage接口對圖片路徑進(jìn)行保存。代碼：
chooseimg: function() { var that = this // 選擇圖片 wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { // tempFilePath可以作為 img 標(biāo)簽的 src 屬性顯示圖片 var tempFilePaths = res.tempFilePaths console.log(tempFilePaths) that.setData({avatarUrl:tempFilePaths[0]}) console.log(tempFilePaths[0]) wx.setStorage({key:'img_path', data: tempFilePaths[0]})}3. 先使用wx.getImageInfo獲取上一步保存的圖片格式（png/jpg等），然后調(diào)用wx.uploadFile接口，將圖片上傳到服務(wù)器，然后使用訓(xùn)練好的權(quán)重參數(shù)對圖片進(jìn)行檢測，然后返回結(jié)果，因為返回的結(jié)果是一種圖像流。為了在前端對圖片進(jìn)行展示，需要在圖片編碼前加字段：‘data:image/png;base64’，將圖片格式轉(zhuǎn)換為base64格式。代碼：
submitimg: function(){ var img_path var that wx.getImageInfo({ src: img_path, success(res){ imgtype = res.type console.log(imgtype) } }) wx.uploadFile({ filePath: img_path, name: 'image', url: '服務(wù)器地址', // 上傳成功！ success(res){ console.log(res) var img_data = JSON.parse(res.data).data.image var base64str_img = 'data:image/' + imgtype + ';base64,' + img_data that.setData({avatarUrl: base64str_img}) // 上傳失敗 fail(){ console.log('--failed--') } }) }}（PS：在前端定義了傳入的數(shù)據(jù)名為image，所以，flask后端接收數(shù)據(jù)名也同樣為image）//前端：wx.uploadFile({ filePath: img_path, name: 'image', url: 服務(wù)器地址})//后端img_file = request.files["image"]三、后端代碼后端這里使用的是flask，這部分的使用相對比較簡單
1. 因為model返回的結(jié)果是一個list，里面有dict組成，主要就是框的左上角、右下角左邊、類別以及類別名。之后對這個result進(jìn)行處理，寫一個畫圖的py文件，根據(jù)輸入的圖像和得到result畫框，將畫框后的結(jié)果保存到save_path中，然后再將圖像格式進(jìn)行轉(zhuǎn)換為base64（返回的數(shù)據(jù)格式：（這里的img_res已經(jīng)是經(jīng)過畫框之后的結(jié)果））
2. 然后因為前端的要求，返回的形式需要用json格式，同時也需要將返回結(jié)果放在data里面，方便前端讀取后端返回的數(shù)據(jù)。
@app.route(DETECTION_URL, methods=["POST"])def predict(): if request.method != "POST": return jsonify({"code": 2, "msg": "the request method is error!", "data": {"isSecret": "null"}}) if request.files.get("image"): # 將讀取的圖片流轉(zhuǎn)換為圖片格式 im_file = request.files["image"] im_bytes = im_file.read() im = Image.open(io.BytesIO(im_bytes)) #將圖片輸入到模型中，輸出的結(jié)果是一個list，帶有坐標(biāo)類別等信息 results = model(im, size=640) # reduce size=320 for faster inference # 預(yù)測的結(jié)果（坐標(biāo) 種類 置信度） result = results.pandas().xyxy[0].to_json(orient="records") img_res = '' with open(save_path, 'rb') as f: img_res = f.read() img_res = base64.b64encode(img_res) return jsonify({ "data": {"detect_res": "yes", "image": str(img_res, 'utf-8')}})if __name__ == "__main__": torch.hub._validate_not_a_forked_repo = lambda a, b, c: True model = torch.hub.load("path", "custom", path="./best.pt", source="local", force_reload=False) # force_reload to recache最后！總結(jié)一下，之前剛開始要做的時候，感覺還挺難的，真的開始做的時候，感覺還行（雖然做的比較簡單，頁面也不是很好看，css一生之?dāng)?#xff01;！！）?
之后，會學(xué)一下項目的部署，目前用的是別人部署好的，但是還是要自己學(xué)學(xué)的！！！
ps：為什么會寫這個博客呢？因為在剛開始找資料的時候，找到一個博客，感覺和我的需求一樣，于是就點(diǎn)進(jìn)去看，結(jié)果是一個購買鏈接，還賣399！！！就這么個東西就399！！我表示很無語，就決定自己寫好了之后一定要公開！！！如果大家有什么問題，可以留言，我們一起共同學(xué)習(xí)！！！
上一篇：Flask實現(xiàn)用戶登錄注冊（附前后端源碼）(flask實現(xiàn)登錄)
