|
|
<!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>
|
|
|
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.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="model", style="width: 300px; font-size:30px;">
|
|
|
<option value="1">小模型</option>
|
|
|
<option value="2">大模型</option>
|
|
|
</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>
|
|
|
</p>
|
|
|
<p id="img"></p>
|
|
|
|
|
|
<script>
|
|
|
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();
|
|
|
$.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>
|