通用图像分析
华瑞新智检测分析平台
主要功能：
- 华瑞新智检测分析平台是基于深度学习及大规模图像训练，准确识别图片中的物体。能够快速准确地识别图片内容信息并自动生成文字描述，标签范围涵盖近20个种类，全面地支持了不一样维度层次的图片语义信息提取。目前华瑞新智检测分析平台包括异物检测和工程车检测两种检测模型。目前异物检测支持（人、车辆、火、蜂巢、风筝、塑料袋、报纸、卫生纸、丝带、矿泉水瓶、保温瓶、绳子、鸟巢、烟雾）14种检测类型，工厂车检测支持（导线异物、塔吊、施工机械、吊车、烟火）5种检测类型。
技术特色及部署架构以下：
- 前端：提供swiper双向控制、上传多张图片、类别检测、数据交互处理及数据渲染等功能。
- 后端：图片的接入、模型的加载，对画面图片进行目标检测的数据处理，与数据库的交互。
- 模型：基于深度学习训练模型，可选择的分类标签。
- 数据库：使用Redis数据库进行数据交互。
效果图（异物检测）
效果图（工程车检测）
前端技术：提供swiper双向控制、上传多张图片、类别检测、数据交互处理及数据渲染等功能，这里展现一个swiper双向控制的代码，仅供参考。
- 一、html代码
<div class="mian-box">
<div class="pc-slide">
<div class="mian-tance">
华瑞新智检测分析平台
</div>
<div class="mian-body">
<div class="view swiper-no-swiping">
<div class="swiper-container" id='bigSwiper'>
<div class="swiper-wrapper" id="exhibition_area">
<div class='swiper-slide isShowYw'><a target='_blank'><img src='../static/image/5.1.jpg' alt=''></a></div>
<div class='swiper-slide isShowYw'><a target='_blank'><img src='../static/image/2.1.jpg' alt=''></a></div>
<div class='swiper-slide isShowYw'><a target='_blank'><img src='../static/image/1.1.jpg' alt=''></a></div>
<div class='swiper-slide isShowYw'><a target='_blank'><img src='../static/image/4.1.jpg' alt=''></a></div>
<div class='swiper-slide isShowYw'><a target='_blank'><img src='../static/image/3.1.jpg' alt=''></a></div>
</div>
<div id="demo" class="demo sidebar_body_two"></div>
<div class="menu">
<div class="menu-header"><img src="../static/image/menu.png" alt=""> <span>类别检测菜单</span></div>
<div class="menu-box"></div>
</div>
</div>
</div>
</div>
<div class="preview">
<div class="swiper-container smalswiper">
<div class="swiper-wrapper" id="smalswiper" >
<div class='swiper-slide isShowYw' id="smallImg4" ><img data_value="fire" attr-type="yiwu" src='../static/image/5.jpg' alt='' id="ywFristChild"></div>
<div class='swiper-slide isShowYw' id="smallImg2"><img data_value="birdnest" attr-type="yiwu" src='../static/image/2.jpg' alt=''></div>
<div class='swiper-slide isShowYw' id="smallImg9"><img data_value="kite" attr-type="yiwu" src='../static/image/1.jpg' alt=''></div>
<div class='swiper-slide isShowYw' id="smallImg10"><img data_value="bottle" attr-type="yiwu" src='../static/image/4.jpg' alt=''></div>
<div class='swiper-slide isShowYw' id="smallImg1"><img data_value="car" attr-type="yiwu" src='../static/image/3.jpg' alt=''></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
复制代码
- 二、swiper联动代码
// 大图片swiper
var viewSwiper = new Swiper('.view .swiper-container', {
autoplayDisableOnInteraction : false,
observer:true,//修改swiper本身或子元素时，自动初始化swiper
observeParents:false,//修改swiper的父元素时，自动初始化swiper
onSlideChangeEnd: function(swiper){
swiper.update();
}
});
viewSwiper.on('slideChangeTransitionStart',function(){
uploadCompletedIndex = this.activeIndex
})
// 小图片swiper
var previewSwiper = new Swiper('.preview .swiper-container', {
autoplayDisableOnInteraction : false,
observer:true,
// grabCursor : true,
spaceBetween: 10,
slidesPerView: 'auto',
touchRatio: 0.2,
speed: 300,
onSlideChangeEnd: function(swiper){
swiper.update();
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on:{
// 点击小图片请求接口展现这一图片的全部信息
tap: function(e){
public_event = e; //保存全局小图片的信息
bigSwiperIndex = previewSwiper.clickedIndex; // 保存全局swiper的下标
$('#click_num').text(bigSwiperIndex+1)
isClickImg = true;
clickType = e.path[0].attributes[0].value;
viewSwiper.slideTo(previewSwiper.clickedIndex);
// 点击小图片进行针对这一个图片的信息进行显示
var str = e.srcElement.classList[0]
// 判断上传的图片是否包含isUpload，上传了的话切换图片请求接口显示数量，不然调用默认的图片
if( typeof(str) !== "undefined" && str.indexOf("isUpload") != -1) {
var param = {
pic_name : ''
}
var str = e.target.currentSrc
var big_img_name = str.split("images/hr_")[1]
param.pic_name = big_img_name;
isClick = big_img_name;
clear() // 清空数据
$.ajax({
url: `${root}/api/get_pic_res`,
type: 'POST',
contentType: "text/html; charset=utf-8",
data:JSON.stringify(param),
success: function(rp){
// var class_name = "<div class='swiper-slide'><a target='_blank'><img src='" + root+"/"+rp.pic_name + "' alt=''></a></div>"
// $("#exhibition_area").html(class_name)
// 显示异物详细信息
$('#persen').html(rp.person_num)
$('#car').html(rp.car_num)
$('#fire').html(rp.fire_num) // 火
$('#beehive').html(rp.beehive_num)
$('#kite').html(rp.kite_num)
$('#plasticbag').html(rp.plasticbag_num)
$('#newspaper').html(rp.bumf_num) // 报纸
$('#paper').html(rp.paper_num)
$('#riband').html(rp.riband_num)
$('#bottle').html(rp.bottle_num)
$('#vacuum_cup').html(rp.vacuum_cup_num)
$('#string').html(rp.string_num)
$('#birdnest').html(rp.birdnest_num)
$('#smoke').html(rp.smoke_num)
// 显示工程车详细信息
$('#daoxianyiwu').html(rp.daoxianyiwu_num)
$('#tadiao').html(rp.tadiao_num)
$('#shigongjixie').html(rp.shigongjixie_num)
$('#diaoche').html(rp.diaoche_num)
$('#yanhuo').html(rp.yanhuo_num)
},
error: function(rp) {
setTimeout(function() {
$('.loading').fadeIn().find('.loadingImg').attr('src','../static/image/error.gif')
$('.loading').fadeIn().find('.loadingText').text('检测失败')
setTimeout(function() {
$('.loading').fadeOut()
},1500)
}, 1500)
}
})
} else {
// 渲染默认静态数据
imgOnload()
}
}
}
});
// 图片联动（点击小图片切换大图）
viewSwiper.params.control = previewSwiper;
previewSwiper.params.control = viewSwiper;
复制代码
至此 完结！best regards！html
相关文章
- 1. 图像连通域分析
- 2. OpenCV二值图像连通域分析
- 3. 二值图像连通域分析
- 4. OpenCV-二值图像连通域分析
- 5. opencv图像连通区域分析
- 6. 图像分析------直方图分析
- 7. 图像处理、图像分析、图像理解 范畴区分
- 8. 通过投影分析做图像分割
- 9. 图像处理 图像分析和图像理解
- 10. 图像分析——伪彩色图像、heatmap图像
- 更多相关文章...
- • PHP 图像处理 - PHP参考手册
- • Docker 镜像使用 - Docker教程
- • 常用的分布式事务解决方案
- • Git五分钟教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 图像连通域分析
- 2. OpenCV二值图像连通域分析
- 3. 二值图像连通域分析
- 4. OpenCV-二值图像连通域分析
- 5. opencv图像连通区域分析
- 6. 图像分析------直方图分析
- 7. 图像处理、图像分析、图像理解 范畴区分
- 8. 通过投影分析做图像分割
- 9. 图像处理 图像分析和图像理解
- 10. 图像分析——伪彩色图像、heatmap图像