分為yolov5項目部署和微信小程序兩部分，先介紹微信小程序前端展示+flask后端，之后介紹項目部署這部分。
一、先上效果圖
1. 點擊選擇圖片，調(diào)用攝像頭選擇圖片
?
2.選擇圖片之后，點擊開始檢測，然后返回結(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接口對圖片路徑進行保存。代碼：
chooseimg: function() {
var that = this
// 選擇圖片
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作為 img 標簽的 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ù)對圖片進行檢測，然后返回結(jié)果，因為返回的結(jié)果是一種圖像流。為了在前端對圖片進行展示，需要在圖片編碼前加字段：‘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進行處理，寫一個畫圖的py文件，根據(jù)輸入的圖像和得到result畫框，將畫框后的結(jié)果保存到save_path中，然后再將圖像格式進行轉(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，帶有坐標類別等信息
results = model(im, size=640) # reduce size=320 for faster inference
# 預(yù)測的結(jié)果（坐標 種類 置信度）
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)常。。。?
之后，會學(xué)一下項目的部署，目前用的是別人部署好的，但是還是要自己學(xué)學(xué)的?。?！文章來源：http://www.zghlxwxcb.cn/news/detail-781287.html
ps：為什么會寫這個博客呢？因為在剛開始找資料的時候，找到一個博客，感覺和我的需求一樣，于是就點進去看，結(jié)果是一個購買鏈接，還賣399?。?！就這么個東西就399?。∥冶硎竞軣o語，就決定自己寫好了之后一定要公開?。?！如果大家有什么問題，可以留言，我們一起共同學(xué)習(xí)！?。?span toymoban-style="hidden">文章來源地址http://www.zghlxwxcb.cn/news/detail-781287.html
到了這里，關(guān)于yolov5部署+微信小程序前端展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
