|
|
<!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="test1">{#调用layui的上传文件组件#}
|
|
|
<i class="layui-icon"></i>上传图片
|
|
|
</button>
|
|
|
<button type="button" class="my-btn" id="test2" onclick="GetImgfromClip()">{#调用layui的上传文件组件#}
|
|
|
<i class="layui-icon"></i>获取剪切板
|
|
|
</button>
|
|
|
获取剪切板在无https情况下失败，直接Ctrl+V即可
|
|
|
<p>
|
|
|
<h2>模型选择</h2>
|
|
|
</p>
|
|
|
|
|
|
<div>
|
|
|
<!-- 下拉框 -->
|
|
|
<select id="model">
|
|
|
<option value="1">小模型</option>
|
|
|
<option value="2">大模型</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
function GetImgfromClip()
|
|
|
{
|
|
|
var promise = navigator.clipboard.readText();
|
|
|
alert(promise);
|
|
|
}
|
|
|
</script>
|
|
|
<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();
|
|
|
$.getJSON('/dlurl/', {'url':val, 'model':model},function(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;
|
|
|
}
|
|
|
};
|
|
|
}
|
|
|
$("body").append('<br>' +'<br>' + '<b>'+'<font size="4">'+"检测图片："+res.code+'</font> '+"</b>"+'<br>');
|
|
|
document.body.appendChild(i);//将后端返回的图片加入到页面中
|
|
|
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
<script>
|
|
|
layui.use('upload', function(){
|
|
|
var upload = layui.upload;
|
|
|
$ = layui.$ //注意要定义$,该符号不是jQuery中的$
|
|
|
//执行实例
|
|
|
var uploadInst = upload.render({
|
|
|
elem: '#test1' //绑定元素
|
|
|
,url: '/upload/' //上传接口,需要在views.py中配置这个接口
|
|
|
,data:{ //需要上传这个data，不然程序也会报错
|
|
|
'csrfmiddlewaretoken':function(){
|
|
|
return $(':input:first').val()
|
|
|
}
|
|
|
}
|
|
|
,done: function(res){
|
|
|
//上传完毕回调
|
|
|
console.log(res);
|
|
|
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;
|
|
|
}
|
|
|
};
|
|
|
}
|
|
|
$("body").append('<br>' +'<br>' + '<b>'+'<font size="4">'+"检测图片："+res.code+'</font> '+"</b>"+'<br>');
|
|
|
document.body.appendChild(i);//将后端返回的图片加入到页面中
|
|
|
}
|
|
|
,error: function(){
|
|
|
//请求异常回调
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
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>
|