yolov5部署+微信小程序前端展示

分为yolov5项目部署和微信小程序两部分，先介绍微信小程序前端展示+flask后端，之后介绍项目部署这部分。

一、先上效果图

1. 点击选择图片，调用摄像头选择图片

2.选择图片之后，点击开始检测，然后返回结果

 ​​​​​​​

 二、前端代码

wxml文件：

1. view class="container">
2. <view>
3. <image src="{{avatarUrl}}" class=".img" bindtap="imgClick"></image>
4. <button bindtap="chooseimg" class=".btn_select">选择图片</button>
5. <button form-type="submit" class=".btn_submit" bindtap="submitimg">开始检测</button>
6. </view>
7. <view class="text-container">
8. <view>{{name_and_nums}}</view>
9. <view class="text" wx:for="{{names}}">{{item.name}}: {{item.value}} </view>
10. </view>
11. </view>

js文件，分为两部分，一部分是调用摄像头，另一部分是图片检测

1. 数据定义：

1. data: {
2. avatarUrl: 'res.png',
3. base64imgurl: null,
4. name_num: '',
5. names: [],
6. name_and_nums: ''
8. },

2. 调用摄像头，使用微信小程序中的wx.chooseImage接口,并使用wx.setStorage接口对图片路径进行保存。代码：

1. chooseimg: function() {
2. var that = this
3. // 选择图片
4. wx.chooseImage({
5. count: 1,
6. sizeType: ['original', 'compressed'],
7. sourceType: ['album', 'camera'],
8. success(res) {
9. // tempFilePath可以作为 img 标签的 src 属性显示图片
10. var tempFilePaths = res.tempFilePaths
11. console.log(tempFilePaths)
12. that.setData({avatarUrl:tempFilePaths[0]})
13. console.log(tempFilePaths[0])
14. wx.setStorage({key:'img_path', data: tempFilePaths[0]})
15. }

3. 先使用wx.getImageInfo获取上一步保存的图片格式（png/jpg等），然后调用wx.uploadFile接口，将图片上传到服务器，然后使用训练好的权重参数对图片进行检测，然后返回结果，因为返回的结果是一种图像流。为了在前端对图片进行展示，需要在图片编码前加字段：‘data:image/png;base64’，将图片格式转换为base64格式。代码：

1. submitimg: function(){
2. var img_path
3. var that
4. wx.getImageInfo({
5. src: img_path,
6. success(res){
7. imgtype = res.type
8. console.log(imgtype)
9. }
10. })
11. wx.uploadFile({
12. filePath: img_path,
13. name: 'image',
14. url: '服务器地址',
15. // 上传成功！
16. success(res){
17. console.log(res)
18. var img_data = JSON.parse(res.data).data.image
19. var base64str_img = 'data:image/' + imgtype + ';base64,' + img_data
20. that.setData({avatarUrl: base64str_img})
22. // 上传失败
23. fail(){
24. console.log('--failed--')
26. }
27. })
28. }
29. }

（PS：在前端定义了传入的数据名为image，所以，flask后端接收数据名也同样为image）

1. //前端：
3. wx.uploadFile({
4. filePath: img_path,
5. name: 'image',
6. url: 服务器地址
7. })
9. //后端
10. img_file = request.files["image"]

三、后端代码

后端这里使用的是flask，这部分的使用相对比较简单

1. 因为model返回的结果是一个list，里面有dict组成，主要就是框的左上角、右下角左边、类别以及类别名。之后对这个result进行处理，写一个画图的py文件，根据输入的图像和得到result画框，将画框后的结果保存到save_path中，然后再将图像格式进行转换为base64（返回的数据格式：（这里的img_res已经是经过画框之后的结果））

2. 然后因为前端的要求，返回的形式需要用json格式，同时也需要将返回结果放在data里面，方便前端读取后端返回的数据。

1. @app.route(DETECTION_URL, methods=["POST"])
2. def predict():
3. if request.method != "POST":
4. return jsonify({"code": 2, "msg": "the request method is error!", "data": {"isSecret": "null"}})
5. if request.files.get("image"):
6. # 将读取的图片流转换为图片格式
7. im_file = request.files["image"]
8. im_bytes = im_file.read()
9. im = Image.open(io.BytesIO(im_bytes))
10. #将图片输入到模型中，输出的结果是一个list，带有坐标类别等信息
11. results = model(im, size=640) # reduce size=320 for faster inference
12. # 预测的结果（坐标 种类 置信度）
13. result = results.pandas().xyxy[0].to_json(orient="records")
15. img_res = ''
16. with open(save_path, 'rb') as f:
17. img_res = f.read()
18. img_res = base64.b64encode(img_res)
20. return jsonify({ "data": {"detect_res": "yes", "image": str(img_res, 'utf-8')}})
22. if __name__ == "__main__":
23. torch.hub._validate_not_a_forked_repo = lambda a, b, c: True
25. model = torch.hub.load("path", "custom", path="./best.pt", source="local", force_reload=False) # force_reload to recache

最后！总结一下，之前刚开始要做的时候，感觉还挺难的，真的开始做的时候，感觉还行（虽然做的比较简单，页面也不是很好看，css一生之敌！！！） 

之后，会学一下项目的部署，目前用的是别人部署好的，但是还是要自己学学的！！！

ps：为什么会写这个博客呢？因为在刚开始找资料的时候，找到一个博客，感觉和我的需求一样，于是就点进去看，结果是一个购买链接，还卖399！！！就这么个东西就399！！我表示很无语，就决定自己写好了之后一定要公开！！！如果大家有什么问题，可以留言，我们一起共同学习！！！