位置: 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实现登录)

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

  • 社保由税务局征收
  • 非营利组织免税资格认定申请表
  • 两年前的发票可以补开吗
  • 适用5%征收率的范围
  • 土地使用权摊销计入在建工程
  • 生产经营年度汇缴申报时间
  • 企业销售不动产增值税政策
  • 房产税从价计征的计税依据
  • 核定征收企业怎么申报
  • 公司注销后专利还能转让吗
  • 复式记账法哪本书提到过?
  • 研发费用加计扣除新税收政策2023
  • 工会经费怎样申报
  • 别人送我免费赠品
  • 生产企业出口退税流程
  • 新三板公司股东人数
  • 年终奖缴税将有大变化
  • 汇总纳税总机构企业所得税分摊比例备案
  • 个人名下车辆过户
  • 企业所得税季报是填累计数吗
  • 印花税走什么费用
  • 租房中介费计入租赁费吗
  • 待摊费用核算的内容主要包括
  • 法人转钱进公账可以吗
  • windows11怎么显示桌面图标
  • 主营业务成本是借方增加还是贷方增加
  • 投资印花税入什么科目
  • 礼品应该计入会计分录
  • PHP Warning:PHP Startup: in Unknown on line 0解决办法
  • 国家减免税款怎么申请
  • 如何预防电脑系统崩溃
  • 出口增值税怎么计算公式
  • element组件的二次封装注册
  • php数组操作
  • 购买免税农产品的会计分录
  • 社会保险个人部分计入什么科目
  • 暂估成本的账务处理分录
  • yolov3图像识别
  • 公司迁移到外省 税务局需要注销吗
  • 应付未付的工资属于负债吗
  • vue组件怎么使用
  • 差旅费包干是什么意思
  • 普通发票密码区出格了能用吗
  • 董事会会费应计什么科目
  • 人力资源投资收益
  • 现金银行本票的签发人是谁
  • 开了红字信息表对方没开红票
  • 原材料用于加工什么
  • mongodb添加数据库
  • sa密码不满足强密码要求
  • sql for in
  • 公墓造价成本
  • 现金收支月报表
  • 政府补贴进项税额处理
  • 挂靠的项目如何做账?
  • 不允许抵扣进项税额的是
  • 外贸出口退税政策
  • 公司的在建工程入账会计分录没有付款
  • 园林绿化公司的税率是多少
  • 哪些企业需要社工
  • 长期股权投资损益调整怎么回事
  • mysql5.7.
  • win10系统自带的游戏在哪
  • 如何查看windows
  • 虚拟机vmware下载教程
  • win7如何打开浏览器
  • 运维是什么的
  • Android性能优化 武汉招聘
  • javascript闭包优缺点
  • opengl发光物体
  • 内部变量 变成 外部变量
  • js按下键盘事件
  • js window.open如何带参数
  • ajax按顺序执行
  • javascript总结笔记
  • javascript常见的数据类型
  • 企业所得税年报职工薪酬纳税调整明细表
  • 国家税务培训信息网官网
  • 云南省税务干部学校是干什么的
  • 湖南省电子税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设