"/>

文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-09-11 20:07

关注

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

一、先上效果图

点击选择图片,调用摄像头选择图片

 

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

 ​​​​​​​

 

 二、前端代码

wxml文件:

view class="container">                                    {{name_and_nums}}      {{item.name}}: {{item.value}}       

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

数据定义:

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

调用摄像头,使用微信小程序中的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]})}

先使用wx.getImageInfo获取上一步保存的图片格式(png/jpg等),然后调用wx.uploadFile接口,将图片上传到服务器,然后使用训练好的权重参数对图片进行检测,然后返回结果,因为返回的结果是一种图像流。为了在前端对图片进行展示,需要在图片编码前加字段:‘data:image/png;base64’,将图片格式转换为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: '服务器地址',          // 上传成功!          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:在前端定义了传入的数据名为image,所以,flask后端接收数据名也同样为image)

//前端:wx.uploadFile({      filePath: img_path,      name: 'image',      url: 服务器地址})//后端img_file = request.files["image"]

三、后端代码

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

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

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

@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"):        # 将读取的图片流转换为图片格式        im_file = request.files["image"]        im_bytes = im_file.read()        im = Image.open(io.BytesIO(im_bytes))        #将图片输入到模型中,输出的结果是一个list,带有坐标类别等信息        results = model(im, size=640)  # reduce size=320 for faster inference        # 预测的结果(坐标 种类 置信度)        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

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

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

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

来源地址:https://blog.csdn.net/qq_44935078/article/details/126147175

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯