|
|
<!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("选择的检测类别：", val);
|
|
|
$.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", "烟火与塔吊"]
|
|
|
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();
|
|
|
console.log("检测类别与使用模型：", model_class, model)
|
|
|
$.getJSON('/dlurl/', {'url':val, 'model':model, 'class':model_class},function(res){ShowResult(res);});
|
|
|
}
|
|
|
});
|
|
|
</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()
|
|
|
}
|
|
|
, '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){
|
|
|
ShowResult(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转换为图片
|
|
|
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>');
|
|
|
}
|
|
|
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;
|
|
|
}
|
|
|
</script>
|
|
|
<div id="resContainer">
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|