快捷導(dǎo)航

yolov5項(xiàng)目部署+微信小程序前端展示的全過(guò)程

更新時(shí)間：2022年11月28日 09:47:13 作者：頭禿的和尚

YOLOV5模型從發(fā)布到現(xiàn)在都是炙手可熱的目標(biāo)檢測(cè)模型,被廣泛運(yùn)用于各大場(chǎng)景之中,下面這篇文章主要給大家介紹了關(guān)于yolov5項(xiàng)目部署+微信小程序前端展示的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、先上效果圖

1. 點(diǎn)擊選擇圖片，調(diào)用攝像頭選擇圖片

2.選擇圖片之后，點(diǎn)擊開(kāi)始檢測(cè)，然后返回結(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">開(kāi)始檢測(cè)</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)用攝像頭，另一部分是圖片檢測(cè)

1. 數(shù)據(jù)定義：

data: {
    avatarUrl: 'res.png',
    base64imgurl: null,
    name_num: '',
    names: [],
    name_and_nums: ''
 
  },

2. 調(diào)用攝像頭，使用微信小程序中的wx.chooseImage接口,并使用wx.setStorage接口對(duì)圖片路徑進(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ù)對(duì)圖片進(jìn)行檢測(cè)，然后返回結(jié)果，因?yàn)榉祷氐慕Y(jié)果是一種圖像流。為了在前端對(duì)圖片進(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，這部分的使用相對(duì)比較簡(jiǎn)單

1. 因?yàn)閙odel返回的結(jié)果是一個(gè)list，里面有dict組成，主要就是框的左上角、右下角左邊、類別以及類別名。之后對(duì)這個(gè)result進(jìn)行處理，寫(xiě)一個(gè)畫(huà)圖的py文件，根據(jù)輸入的圖像和得到result畫(huà)框，將畫(huà)框后的結(jié)果保存到save_path中，然后再將圖像格式進(jìn)行轉(zhuǎn)換為base64（返回的數(shù)據(jù)格式：（這里的img_res已經(jīng)是經(jīng)過(guò)畫(huà)框之后的結(jié)果））

2. 然后因?yàn)榍岸说囊?，返回的形式需要用json格式，同時(shí)也需要將返回結(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é)果是一個(gè)list，帶有坐標(biāo)類別等信息
        results = model(im, size=640)  # reduce size=320 for faster inference
        # 預(yù)測(cè)的結(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é)一下，之前剛開(kāi)始要做的時(shí)候，感覺(jué)還挺難的，真的開(kāi)始做的時(shí)候，感覺(jué)還行（雖然做的比較簡(jiǎn)單，頁(yè)面也不是很好看，css一生之?dāng)常。。。?nbsp;

之后，會(huì)學(xué)一下項(xiàng)目的部署，目前用的是別人部署好的，但是還是要自己學(xué)學(xué)的?。?！