位置: IT常识 - 正文

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

编辑:rootadmin
yolov5部署+微信小程序前端展示

推荐整理分享yolov5部署+微信小程序前端展示(yolov5部署微信小程序),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:yolov4部署,yolov3部署,yolov5部署到mcu,yolov5搭建,yolov5部署到mcu,yolov3部署,yolov5部署到mcu,yolov5部署到mcu,内容如对您有帮助,希望把文章链接给更多的朋友!

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

一、先上效果图

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

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

 ​​​​​​​

 二、前端代码

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>yolov5部署+微信小程序前端展示(yolov5部署微信小程序)

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

1. 数据定义:

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

2. 调用摄像头,使用微信小程序中的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等),然后调用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,这部分的使用相对比较简单

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

2. 然后因为前端的要求,返回的形式需要用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://www.jiuchutong.com/zhishi/299038.html 转载请保留说明!

上一篇:Flask实现用户登录注册(附前后端源码)(flask实现登录)

下一篇:图像处理——图像增强(图像处理入门)

  • 初级会计职称能加多少工资
  • 年终奖可以税前扣除嘛
  • 经常做无票收入没有通过公户收款会有问题吗
  • 股息红利需要企业交税吗
  • 调整跨期收入是否调增值税
  • 利润分配亏损太多如何处理?
  • 境外公司委托境内公司提供劳务
  • 短期理财的门槛
  • 捐赠个人支出需要交纳个税吗?
  • 认可的发票验证怎么弄
  • 公司有出账没有进账怎么办
  • 携税宝服务费可以入办公费吗
  • 什么叫变动费用
  • 收到股利的现金会计分录
  • 纳税期限变更需要什么
  • 应收票据贴现的会计分录
  • 上个月暂估这个月成本怎么调整
  • linux的进程类型
  • 最新w10系统专业版
  • 初级会计实务的心得体会
  • 残疾人保障金汇算清缴填在哪里
  • 纳税人解除劳动合同补偿
  • 增值税专用发票有几联?
  • 工程预付款抵扣是什么意思
  • 劳务派遣增值税差额征税
  • swoole windows版本
  • php单独运行
  • 已认证留抵待抵扣税额分录
  • web转义字符
  • 抵免法的缺点主要有以下几点
  • 国家规定发票多久之内可以开
  • 房产前期开发
  • 劳务公司给包工头打款备注写什么
  • Thinkphp 中 distinct 的用法解析
  • 已用短信息服务发送信息,对方能收到吗
  • vue获取当前行
  • php array 函数
  • linux0.11编译
  • 6.824 Lab 1: A simple web proxy
  • 借入资金会计科目
  • 用python写
  • apache druid使用
  • 一个例子解释唯物辩证法三大规律
  • 公司项目支付的钱叫什么
  • sql查询结果分页
  • 计提折旧的固定资产全年平均总值怎么算
  • 职工教育经费可以冲回吗
  • 公司没有车加油费怎么报
  • 融资租赁取得的机器设备的账务处理
  • 不开票收入怎么报税
  • 哪些费用可以入开办费
  • 未入账的记账凭证填错了怎么办
  • 税负率偏低
  • 社保基数在哪里申报
  • 电脑开票怎么操作流程
  • 财务顾问费可以税前扣除吗
  • 所得税滞纳金怎么算的
  • 商业企业的期间费用包括
  • linux 解析
  • xp无法访问win7电脑
  • linux怎么开启root权限
  • win8跳过开机密码
  • linux中find命令用法
  • JavaScript中创建文件
  • js如何获取url
  • Android Bound Service(二) ----- Using AIDL
  • android真机调试闪退
  • 防止重复调用接口
  • unity3d坐标系
  • angular api
  • 手游 unity
  • unity开发平台
  • 浅谈JQuery+ajax+jsonp 跨域访问
  • webpack循环引用
  • 安卓屏幕适配详解
  • jquery的$作用
  • 虚开增值税发票但未抵扣怎样处罚
  • 企业所得税账务如何处理
  • 税盘数字证书密码怎么查看
  • 20万块手表交多少税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设