加入多种物体检测,并且上传文件也加入检测功能

main
wangchunlin 4 years ago
parent 7c3d383eb5
commit 79e28a8cb0

@ -10,10 +10,10 @@
</head> </head>
<body> <body>
{% csrf_token %} {#如果不加这个,程序会报错#} {% csrf_token %} {#如果不加这个,程序会报错#}
<button type="button" class="layui-btn" id="test1">{#调用layui的上传文件组件#} <button type="button" class="layui-btn" id="upload">{#调用layui的上传文件组件#}
<i class="layui-icon">&#xe67c;</i>上传图片 <i class="layui-icon">&#xe67c;</i>上传图片
</button> </button>
<button type="button" class="my-btn" id="test2" onclick="GetImgfromClip()">{#调用layui的上传文件组件#} <button type="button" class="my-btn" id="getclip" onclick="GetImgfromClip()">{#调用layui的上传文件组件#}
<i class="layui-icon">&#xe67c;</i>获取剪切板 <i class="layui-icon">&#xe67c;</i>获取剪切板
</button> </button>
<b><font size="4">获取剪切板在无https情况下失败直接Ctrl+V即可</b> <b><font size="4">获取剪切板在无https情况下失败直接Ctrl+V即可</b>
@ -23,16 +23,15 @@
<option value="1">小模型</option> <option value="1">小模型</option>
<option value="2">大模型</option> <option value="2">大模型</option>
</select> </select>
<select id="class", style="width: 300px; font-size:30px;">
<option value="1">火焰与烟雾</option>
<option value="2">一般物体80类</option>
<option value="3">外破(暂未提供)</option>
</select>
</h1> </h1>
</p> </p>
<p id="img"></p> <p id="img"></p>
<script>
function GetImgfromClip()
{
var promise = navigator.clipboard.readText();
alert(promise);
}
</script>
<script> <script>
document.addEventListener("paste", function () { document.addEventListener("paste", function () {
if (event.clipboardData || event.originalEvent) { if (event.clipboardData || event.originalEvent) {
@ -41,38 +40,9 @@ document.addEventListener("paste", function () {
event.preventDefault(); event.preventDefault();
// 字典 dict // 字典 dict
var model = $('#model option:selected').val(); var model = $('#model option:selected').val();
$.getJSON('/dlurl/', {'url':val, 'model':model},function(res){ var model_class = $('#class option:selected').val();
if(res.flag == false) $.getJSON('/dlurl/', {'url':val, 'model':model, 'class':model_class},function(res){ShowResult(res);});
{
alert("图片地址错误。")
return
}
var i = new Image(); //新建image对象从而将文件url转换为图片
i.src = res.img_name;
// 判断是否有缓存
if(i.complete){
// 打印
alert('from:complete : width:'+i.width+',height:'+i.height);
}else{
// 加载完成执行
i.onload = function(){
// 打印
if(i.width>1280)
{
i.height=i.height*1280/i.width;
i.width=1280;
}
};
}
$("#img").prepend(i);
$("#img").prepend('<br>' +'<br>' + '<b>'+'<font size="4">'+"检测图片:"+res.code+'</font> '+"</b>"+'<br>');
})
} }
//var h = $(document).height()-$(window).height();
// var h = $(document).height();
// setTimeout(function(){
// $(document).scrollTop(h);
// },1000); //由于使用了从前往后的插入,就不需要跳转
}); });
</script> </script>
<script> <script>
@ -81,16 +51,43 @@ layui.use('upload', function(){
$ = layui.$ //注意要定义$,该符号不是jQuery中的$ $ = layui.$ //注意要定义$,该符号不是jQuery中的$
//执行实例 //执行实例
var uploadInst = upload.render({ var uploadInst = upload.render({
elem: '#test1' //绑定元素 elem: '#upload' //绑定元素
,url: '/upload/' //上传接口,需要在views.py中配置这个接口 ,url: '/upload/' //上传接口,需要在views.py中配置这个接口
,data:{ //需要上传这个data不然程序也会报错 ,data:{ //需要上传这个data不然程序也会报错
'csrfmiddlewaretoken':function(){ 'csrfmiddlewaretoken':function(){
return $(':input:first').val() return $(':input:first').val()
} }
, 'model':function(){
var model = $('#model option:selected').val();
return model;
}
, 'class':function(){
var model_class = $('#class option:selected').val();
return model_class;
}
} }
,done: function(res){ ,done: function(res){
//上传完毕回调 ShowResult(res);
console.log(res); }
,error: function(){
}
});
});
</script>
<script>
function GetImgfromClip()
{
var promise = navigator.clipboard.readText();
alert(promise);
}
</script>
<script type="text/javascript">
function ShowResult(res){
if(res.flag == false)
{
alert("图片地址错误。")
return
}
var i = new Image(); //新建image对象从而将文件url转换为图片 var i = new Image(); //新建image对象从而将文件url转换为图片
i.src = res.img_name; i.src = res.img_name;
// 判断是否有缓存 // 判断是否有缓存
@ -106,18 +103,11 @@ layui.use('upload', function(){
i.height=i.height*1280/i.width; i.height=i.height*1280/i.width;
i.width=1280; i.width=1280;
} }
}; };
} }
$("#img").prepend(i); $("#img").prepend(i);
$("#img").prepend('<br>' +'<br>' + '<b>'+'<font size="4">'+"检测图片:"+res.code+'</font> '+"</b>"+'<br>'); $("#img").prepend('<br>' +'<br>' + '<b>'+'<font size="4">'+"检测图片:"+res.code+'</font> '+"</b>"+'<br>');
} }
,error: function(){
//请求异常回调
}
});
});
</script>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){ function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image(); var img = new Image();
img.src = objImg.src; img.src = objImg.src;

@ -1,3 +1,4 @@
import re
from django.shortcuts import render from django.shortcuts import render
from django.http import HttpResponse, JsonResponse from django.http import HttpResponse, JsonResponse
import os import os
@ -9,9 +10,8 @@ import requests, os, json
def upload(request): def upload(request):
if request.method == 'POST': if request.method == 'POST':
file = request.FILES.get('file') #获取前端上传的文件 file = request.FILES.get('file') #获取前端上传的文件
print("************") m_model=request.POST.get('model')
print(file) m_class=request.POST.get('class')
print("************")
fix = datetime.now().strftime('%Y%m%d%H%M%S%f')+'1' #给文件加前缀防止文件名重复 fix = datetime.now().strftime('%Y%m%d%H%M%S%f')+'1' #给文件加前缀防止文件名重复
#以下用绝对路径存储文件,之前我用相对路径一直写不对 #以下用绝对路径存储文件,之前我用相对路径一直写不对
curPath = os.path.abspath( os.path.dirname( __file__ ) ) curPath = os.path.abspath( os.path.dirname( __file__ ) )
@ -23,13 +23,22 @@ def upload(request):
for i in file.chunks(): for i in file.chunks():
f.write(i) f.write(i)
f.close() f.close()
RR = DL.run(weights=(curPath+"/yolov5/v6m6.pt"), source=img_path, imgsz=(1280, 1280), project=(curPath+"/static/detected")) if(int(m_class)==1):
return JsonResponse({'img_name':img_path_res,'code':"【大模型】"+RR, 'flag': True}) if(int(m_model)==1): #小模型
RR = DL.run(weights=(curPath+"/yolov5/v3s.pt"), source=img_path, project=(curPath+"/static/detected"))
return JsonResponse({'img_name':img_path_res,'code':"【烟火 小模型】"+RR, 'flag': True})
if(int(m_model)==2): #大模型
RR = DL.run(weights=(curPath+"/yolov5/v6m6.pt"), source=img_path, imgsz=(1280, 1280), project=(curPath+"/static/detected"))
return JsonResponse({'img_name':img_path_res,'code':"【烟火 大模型】"+RR, 'flag': True})
if(int(m_class)==2):
RR = DL.run(weights=(curPath+"/yolov5/yolov5s.pt"), source=img_path, project=(curPath+"/static/detected"))
return JsonResponse({'img_name':img_path_res,'code':"【一般物体检测】"+RR, 'flag': True})
def dlurl(request): def dlurl(request):
if request.method == 'GET': if request.method == 'GET':
url = request.GET["url"] #获取前端上传的文件 url = request.GET["url"] #获取前端上传的文件
m_model=request.GET["model"] m_model=request.GET["model"]
m_class=request.GET["class"]
print(m_model) print(m_model)
print(url) print(url)
name = url.split(r'/')[-1] name = url.split(r'/')[-1]
@ -46,12 +55,16 @@ def dlurl(request):
f.close f.close
#返回给前端的图片路径用相对路径,前端用绝对路径反而加载不了图片 #返回给前端的图片路径用相对路径,前端用绝对路径反而加载不了图片
img_path_res = '/static/detected/'+fix+name img_path_res = '/static/detected/'+fix+name
if(int(m_model)==1): #小模型 if(int(m_class)==1):
RR = DL.run(weights=(curPath+"/yolov5/v3s.pt"), source=img_path, project=(curPath+"/static/detected")) if(int(m_model)==1): #小模型
return JsonResponse({'img_name':img_path_res,'code':"【小模型】"+RR, 'flag': True}) RR = DL.run(weights=(curPath+"/yolov5/v3s.pt"), source=img_path, project=(curPath+"/static/detected"))
if(int(m_model)==2): #大模型 return JsonResponse({'img_name':img_path_res,'code':"【烟火 小模型】"+RR, 'flag': True})
RR = DL.run(weights=(curPath+"/yolov5/v6m6.pt"), source=img_path, imgsz=(1280, 1280), project=(curPath+"/static/detected")) if(int(m_model)==2): #大模型
return JsonResponse({'img_name':img_path_res,'code':"【大模型】"+RR, 'flag': True}) RR = DL.run(weights=(curPath+"/yolov5/v6m6.pt"), source=img_path, imgsz=(1280, 1280), project=(curPath+"/static/detected"))
return JsonResponse({'img_name':img_path_res,'code':"【烟火 大模型】"+RR, 'flag': True})
if(int(m_class)==2):
RR = DL.run(weights=(curPath+"/yolov5/yolov5s.pt"), source=img_path, project=(curPath+"/static/detected"))
return JsonResponse({'img_name':img_path_res,'code':"【一般物体检测】"+RR, 'flag': True})

Loading…
Cancel
Save