通用圖像分析
華瑞新智檢測分析平臺
主要功能：
- 華瑞新智檢測分析平臺是基於深度學習及大規模圖像訓練，準確識別圖片中的物體。能夠快速準確地識別圖片內容信息並自動生成文字描述，標籤範圍涵蓋近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圖像