|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
{% load static %}
|
|
|
<link rel="stylesheet" href="{% static 'layui/css/layui.css' %}" media="all">
|
|
|
<meta charset="UTF-8">
|
|
|
<title>WildFire</title>
|
|
|
<script src="../static/layui/layui.js"></script>
|
|
|
<!-- 新 Bootstrap4 核心 CSS 文件 -->
|
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
|
|
|
|
|
|
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
|
|
|
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
|
|
|
|
|
|
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
|
|
|
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
|
|
|
|
|
|
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
|
|
|
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
{% csrf_token %} {#如果不加这个，程序会报错#}
|
|
|
<button type="button" class="layui-btn" id="upload">{#调用layui的上传文件组件#}
|
|
|
<i class="layui-icon"></i>上传图片
|
|
|
</button>
|
|
|
<button type="button" class="my-btn" id="getclip" onclick="GetImgfromClip()">{#调用layui的上传文件组件#}
|
|
|
<i class="layui-icon"></i>获取剪切板
|
|
|
</button>
|
|
|
<b><font size="4">获取剪切板在无https情况下失败，直接Ctrl+V即可</b>
|
|
|
<p id="mode select">
|
|
|
<h1>模型选择:
|
|
|
<select id="class" style="width: 200px; font-size:30px;"></select>
|
|
|
<select id="model" style="width: 600px; font-size:30px;"></select>
|
|
|
</h1>
|
|
|
</p>
|
|
|
<p id="img"></p>
|
|
|
|
|
|
<script>
|
|
|
$(function () {
|
|
|
$("#class").change(function () {
|
|
|
$("#model").empty();//清空回调列表;
|
|
|
var val = this.value;
|
|
|
console.log("选择的检测类别：", Object.keys(dic_class)[val-1]);
|
|
|
$.each(dic_class, function (i, n) { //each()方法为每个匹配元素规定要运行的函数;
|
|
|
if (Object.keys(dic_class)[val-1] == i) {
|
|
|
$.each(dic_class[i], function (j,m) {
|
|
|
var text = document.createTextNode(m);//createTextNode()方法创建文本节点;
|
|
|
var op = document.createElement("option");//创建class元素;
|
|
|
op.value = j+1
|
|
|
$(op).append(text);
|
|
|
$("#model").append(op);
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
var dic_class={};//创建一个字典;
|
|
|
dic_class["外破"]=["所有模型", "外破（ljp4500张）四类v5v3", "外破（ljp4500张）四类v5v7", "外破（ljp4500张）四类v5v7m", "烟火与塔吊", "外破（ljp4500张）四类v5v7m6", "yolov3-tiny四类(正式使用)", "yolov3-tiny两类(正式使用)"]
|
|
|
dic_class["山火"]=["所有模型","小模型", "大模型", "泛模型"]
|
|
|
dic_class["绝缘子"]=["所有模型","绝缘子缺陷（ljp2000张）两类v5v7"]
|
|
|
dic_class["一般物体80类"]=["所有模型","v5sv7"]
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
$("#model").empty();//清空回调列表;
|
|
|
var dic_class_count = 1;
|
|
|
for(var key in dic_class){
|
|
|
var text = document.createTextNode(key);//createTextNode()方法创建文本节点;
|
|
|
var op = document.createElement("option");//创建class元素;
|
|
|
op.value = dic_class_count
|
|
|
$(op).append(text);
|
|
|
$("#class").append(op);
|
|
|
dic_class_count++;
|
|
|
}
|
|
|
$.each(dic_class[Object.keys(dic_class)[0]], function (j,m) {
|
|
|
var text = document.createTextNode(m);//createTextNode()方法创建文本节点;
|
|
|
var op = document.createElement("option");//创建class元素;
|
|
|
op.value = j+1
|
|
|
$(op).append(text);
|
|
|
$("#model").append(op);
|
|
|
})
|
|
|
});
|
|
|
document.addEventListener("paste", function () {
|
|
|
if (event.clipboardData || event.originalEvent) {
|
|
|
var clipboardData = (event.clipboardData || window.clipboardData);
|
|
|
var val = clipboardData.getData('text');
|
|
|
event.preventDefault();
|
|
|
// 字典 dict
|
|
|
var model = $('#model option:selected').val();
|
|
|
var model_class = $('#class option:selected').val();
|
|
|
if(model==1) {
|
|
|
console.log("检测类别所有模型：",Object.keys(dic_class)[model_class-1])
|
|
|
var date = new Date(); //时间对象
|
|
|
var str = date.getTime(); //转换成时间戳
|
|
|
var num = dic_class[Object.keys(dic_class)[model_class-1]].length-1
|
|
|
var table = $("<table id='" + str + "' class='main_css'></table>").prependTo($("#img"))
|
|
|
console.log("检测总数：", num)
|
|
|
for(var i=0; i<Math.ceil(num/3);i++) {
|
|
|
var tr = $("<tr id='" + i + "'></tr>").appendTo(table)
|
|
|
var last_num
|
|
|
|
|
|
if((num-i*3)>2){last_num=3}else{last_num=num-i*3}
|
|
|
|
|
|
for(var j=0;j<last_num;j++){
|
|
|
var td = $("<td id='" + j + "'></td>").appendTo(tr)
|
|
|
}
|
|
|
}
|
|
|
$.each(dic_class[Object.keys(dic_class)[model_class-1]], function (j,m) {
|
|
|
var model_num_count = j+1;
|
|
|
if(model_num_count==1) {
|
|
|
return true;
|
|
|
}
|
|
|
$.getJSON('/dlurl/', {'url':val, 'model':model_num_count, 'class':model_class,'model_name':dic_class[Object.keys(dic_class)[model_class-1]][model_num_count-1],'class_name':Object.keys(dic_class)[model_class-1]},function(res){ShowResult(res, num, j-1, table);});
|
|
|
})
|
|
|
}
|
|
|
else {
|
|
|
console.log("检测类别与使用模型：", Object.keys(dic_class)[model_class-1], ',',dic_class[Object.keys(dic_class)[model_class-1]][model-1])
|
|
|
$.getJSON('/dlurl/', {'url':val, 'model':model, 'class':model_class,'model_name':dic_class[Object.keys(dic_class)[model_class-1]][model-1],'class_name':Object.keys(dic_class)[model_class-1]},function(res){ShowResult(res,1);});
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
<script>
|
|
|
|
|
|
layui.use('upload', function(){
|
|
|
var upload = layui.upload;
|
|
|
$ = layui.$ //注意要定义$,该符号不是jQuery中的$
|
|
|
//执行实例
|
|
|
var uploadInst = upload.render({
|
|
|
elem: '#upload' //绑定元素
|
|
|
,url: '/upload/' //上传接口,需要在views.py中配置这个接口
|
|
|
,data:{ //需要上传这个data，不然程序也会报错
|
|
|
'csrfmiddlewaretoken':function(){
|
|
|
return $(':input:first').val()
|
|
|
}
|
|
|
}
|
|
|
,done: function(res){
|
|
|
// 字典 dict
|
|
|
var model = $('#model option:selected').val();
|
|
|
var model_class = $('#class option:selected').val();
|
|
|
if(model==1) {
|
|
|
console.log("检测类别所有模型：",Object.keys(dic_class)[model_class-1])
|
|
|
var date = new Date(); //时间对象
|
|
|
var str = date.getTime(); //转换成时间戳
|
|
|
var num = dic_class[Object.keys(dic_class)[model_class-1]].length-1
|
|
|
var table = $("<table id='" + str + "'></table>").prependTo($("#img"))
|
|
|
console.log("检测总数：", num)
|
|
|
for(var i=0; i<Math.ceil(num/3);i++) {
|
|
|
var tr = $("<tr id='" + i + "'></tr>").appendTo(table)
|
|
|
var last_num
|
|
|
|
|
|
if((num-i*3)>2){last_num=3}else{last_num=num-i*3}
|
|
|
|
|
|
for(var j=0;j<last_num;j++){
|
|
|
var td = $("<td id='" + j + "'></td>").appendTo(tr)
|
|
|
}
|
|
|
}
|
|
|
$.each(dic_class[Object.keys(dic_class)[model_class-1]], function (j,m) {
|
|
|
var model_num_count = j+1;
|
|
|
if(model_num_count==1) {
|
|
|
return true;
|
|
|
}
|
|
|
$.getJSON('/dlurl/', {'url':res.upload_img_path, 'filename':res.source_image_name,'model':model_num_count, 'class':model_class,'model_name':dic_class[Object.keys(dic_class)[model_class-1]][model_num_count-1],'class_name':Object.keys(dic_class)[model_class-1]},function(res){ShowResult(res, num, j-1, table);});
|
|
|
})
|
|
|
}
|
|
|
else {
|
|
|
console.log("检测类别与使用模型：", Object.keys(dic_class)[model_class-1], ',',dic_class[Object.keys(dic_class)[model_class-1]][model-1])
|
|
|
$.getJSON('/dlurl/', {'url':res.upload_img_path, 'filename':res.source_image_name,'model':model, 'class':model_class,'model_name':dic_class[Object.keys(dic_class)[model_class-1]][model-1],'class_name':Object.keys(dic_class)[model_class-1]},function(res){ShowResult(res, 1);});
|
|
|
}
|
|
|
}
|
|
|
,error: function(){
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
<script>
|
|
|
function GetImgfromClip()
|
|
|
{
|
|
|
var promise = navigator.clipboard.readText();
|
|
|
alert(promise);
|
|
|
}
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
function ShowResult(res, num, curnum, table){
|
|
|
if(res.flag == false)
|
|
|
{
|
|
|
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;
|
|
|
}
|
|
|
};
|
|
|
}
|
|
|
if(num==1) {
|
|
|
$("#img").prepend(i);
|
|
|
$("#img").prepend('<br>' + '<b>'+'<font size="4">'+"检测信息："+res.code+res.msg+'</font> '+"</b>"+'<br>');
|
|
|
}
|
|
|
else {
|
|
|
var tr_num = Math.floor(curnum/3)
|
|
|
var td_num = curnum-Math.floor(curnum/3)*3
|
|
|
var w = $(window).width()
|
|
|
var img = $('<img class="img1" alt="" src="' + res.img_name + '" onload="DrawImg(' + Math.floor(w/3) + ',600);" />')
|
|
|
table.find("tr:eq('" + tr_num + "') td:eq('" + td_num + "')").prepend(img);
|
|
|
table.find("tr:eq('" + tr_num + "') td:eq('" + td_num + "')").prepend('<b>'+'<font size="2">'+"检测信息："+res.code+'</font>'+"</b>");
|
|
|
//$('.main_css').css('width','1000px')
|
|
|
}
|
|
|
}
|
|
|
function AutoResizeImage(maxWidth,maxHeight,objImg){
|
|
|
var img = new Image();
|
|
|
img.src = objImg.src;
|
|
|
var hRatio;
|
|
|
var wRatio;
|
|
|
var Ratio = 1;
|
|
|
var w = img.width;
|
|
|
var h = img.height;
|
|
|
wRatio = maxWidth / w;
|
|
|
hRatio = maxHeight / h;
|
|
|
if (maxWidth ==0 && maxHeight==0){
|
|
|
Ratio = 1;
|
|
|
}else if (maxWidth==0){//
|
|
|
if (hRatio<1) Ratio = hRatio;
|
|
|
}else if (maxHeight==0){
|
|
|
if (wRatio<1) Ratio = wRatio;
|
|
|
}else if (wRatio<1 || hRatio<1){
|
|
|
Ratio = (wRatio<=hRatio?wRatio:hRatio);
|
|
|
}
|
|
|
if (Ratio<1){
|
|
|
w = w * Ratio;
|
|
|
h = h * Ratio;
|
|
|
}
|
|
|
objImg.height = h;
|
|
|
objImg.width = w;
|
|
|
}
|
|
|
function DrawImg(boxWidth,boxHeight)
|
|
|
{
|
|
|
var imgWidth=$(".img1").width();
|
|
|
var imgHeight=$(".img1").height();
|
|
|
//比较imgBox的长宽比与img的长宽比大小
|
|
|
if((boxWidth/boxHeight)>=(imgWidth/imgHeight))
|
|
|
{
|
|
|
//重新设置img的width和height
|
|
|
$(".img1").width((boxHeight*imgWidth)/imgHeight);
|
|
|
$(".img1").height(boxHeight);
|
|
|
//让图片居中显示
|
|
|
var margin=(boxWidth-$(".img1").width())/2;
|
|
|
$(".img1").css("margin-left",margin);
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
//重新设置img的width和height
|
|
|
$(".img1").width(boxWidth);
|
|
|
$(".img1").height((boxWidth*imgHeight)/imgWidth);
|
|
|
//让图片居中显示
|
|
|
//var margin=(boxHeight-$(".img1").height())/2;
|
|
|
var margin=10
|
|
|
$(".img1").css("margin-top",margin);
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<div id="resContainer">
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|