You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
363 lines
14 KiB
363 lines
14 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="cache-control" |
|
content="max-age=0" /> |
|
<meta http-equiv="cache-control" |
|
content="no-store" /> |
|
<meta http-equiv="expires" |
|
content="-1" /> |
|
<meta http-equiv="expires" |
|
content="Tue, 01 Jan 1980 1:00:00 GMT" /> |
|
<meta http-equiv="pragma" |
|
content="no-cache" /> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
<meta charset="utf-8" /> |
|
|
|
<style> |
|
|
|
body, html { |
|
font-family: "Arial"; |
|
} |
|
|
|
* { |
|
box-sizing: border-box; |
|
} |
|
</style> |
|
|
|
<title>AI Engine</title> |
|
|
|
<script src="jquery_3_2_1.min.js"></script> |
|
<script src="fabric_jquery.easyui.min_compressed_on_nvr.js"></script> |
|
<script src="config.js"></script> |
|
<script src="cookie.min.js"></script> |
|
<script src="lang.js"></script> |
|
<script src="lang_cookie.js"></script> |
|
<script src="cropper.min.js"></script> |
|
|
|
<script> |
|
window.onerror = function (message, url, linenumber) { |
|
|
|
console.log('JavaScript error: ' + message + ' on line ' + linenumber + ' for ' + url); |
|
|
|
if (url.search("fabric_jquery.easyui.min_compressed_on_nvr.js") >= 1) { |
|
loadScript("fabric_jquery.easyui.min_compressed_on_nvr.js", function () { |
|
}); |
|
} |
|
else if (url.search("jquery_3_2_1.min.js") >= 1) { |
|
loadScript("jquery_3_2_1.min.js", function () { |
|
}); |
|
} |
|
else if (url.search("cropper.min.js") >= 1) { |
|
loadScript("cropper.min.js", function () { |
|
}); |
|
} |
|
else if (url.search("config.js") >= 1) { |
|
loadScript("config.js", function () { |
|
}); |
|
} |
|
else if (url.search("cookie.min.js") >= 1) { |
|
loadScript("cookie.min.js", function () { |
|
}); |
|
} |
|
else if (url.search("lang.js") >= 1) { |
|
loadScript("lang.js", function () { |
|
}); |
|
} |
|
else if (url.search("lang_cookie.js") >= 1) { |
|
loadScript("lang_cookie.js", function () { |
|
}); |
|
} |
|
else if (message.search("slider") >= 1) { |
|
loadScript("fabric_jquery.easyui.min_compressed_on_nvr.js", function () { |
|
}); |
|
} |
|
else if (message.search("myport") >= 1) { |
|
loadScript("config.js", function () { |
|
}); |
|
} |
|
else if (message.search("cookie") >= 1) { |
|
loadScript("cookie.min.js", function () { |
|
}); |
|
} |
|
else { |
|
//location.reload(); |
|
var replaceUrl = 'http://' + window.location.hostname + ':' + GetUrlPort() + '/Aida/upload_img.html'; |
|
//alert(replaceUrl); |
|
window.location.replace(replaceUrl); |
|
} |
|
} |
|
function GetUrlPort() { |
|
var url_href = window.location.href; |
|
var arr_url = url_href.split(":")[2].split("/")[0]; |
|
|
|
return arr_url; |
|
} |
|
if (window.history.replaceState) { |
|
window.history.replaceState(null, null, window.location.href); |
|
} |
|
</script> |
|
|
|
<link rel="stylesheet" href="css/upload_img_style.css"> |
|
<link rel="stylesheet" href="css/upload_img_demo.css"> |
|
<link rel="stylesheet" href="normalize.min.css"> |
|
<link rel="stylesheet" href="cropper.min.css"> |
|
|
|
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> |
|
<link rel="stylesheet" type="text/css" href="easyui.css"> |
|
|
|
<script> |
|
var g_check_if_run_setting = 0; |
|
</script> |
|
|
|
</head> |
|
<body onContextMenu="window.event.returnValue=false"> |
|
<div class="cd__intro"> |
|
<h1>Register VIP Visitor</h1> |
|
</div> |
|
<div class="progress" style="background-color:white"> |
|
<div class="progress-bar progress-bar-striped" style="min-width: 20px;visibility:hidden;"></div> |
|
</div> |
|
|
|
<!--$%adsense%$--> |
|
<div class="cd__main"> |
|
<!-- Start DEMO HTML (Use the following code into your project)--> |
|
<div class="page"> |
|
<nobr>Upload image</nobr> |
|
<div class="box"> |
|
<input type="file" id="file-input" accept="image/png, image/jpeg"/> |
|
</div> |
|
<!-- leftbox --> |
|
<div class="box-2"> |
|
<div class="result"></div> |
|
</div> |
|
<!--rightbox--> |
|
<div class="box-2 img-result"> |
|
<!-- result of crop --> |
|
<img class="cropped" src="" alt=""> |
|
</div> |
|
<!-- input file --> |
|
<div class="box"> |
|
<div class="options" style="display:none"> |
|
<label> Width</label> |
|
<input type="number" class="img-w" value="120" min="80" max="120" /> |
|
<input type="number" class="img-h" value="120" min="80" max="120" /> |
|
</div> |
|
<!-- save btn --> |
|
<!-- download btn --> |
|
<!--<a href="" >Download</a>--> |
|
<!-- submit btn --> |
|
|
|
<div align="center"> |
|
<input align="center" id="IDOK" type="button" value=" Set " onclick="func_setUpload_img()" style="background-color:#6c87d4;color:white;height:36px;width:300px;" /> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- END EDMO HTML (Happy Coding!)--> |
|
</div> |
|
|
|
<script> |
|
|
|
function loadScript(url, callback) { |
|
var script = document.createElement("Script"); |
|
script.type = "text/javascript"; |
|
|
|
//IE 验证脚本是否下载完成 |
|
if (script.readyState) { |
|
script.onreadystatechange = function () { |
|
//readyState属性有5种取值 |
|
//uninitialized：初始状态 |
|
//loading：开始下载 |
|
//interactive：数据完成下载但尚不可用 |
|
//complete：数据已经准备就绪 |
|
//实际使用时，readyState的值并不像我们预想的那样有规律，实践发现使用readyState |
|
//最靠谱的方式是同时检查以下2个状态，只要其中1个触发，就认为脚本下载完成。 |
|
if (script.readyState == "loaded" || script.readyState == "complete") { |
|
//移除事件处理器，确保事件不会处理2次 |
|
script.onreadystatechange = null; |
|
callback(); |
|
} |
|
}; |
|
} |
|
|
|
//其他浏览器 |
|
else { |
|
script.onload = function () { |
|
callback(); |
|
}; |
|
} |
|
|
|
script.src = url; |
|
//把新建的<Script>添加到<head>里比添加到<body>里更保险。 |
|
document.getElementsByTagName("head")[0].appendChild(script); |
|
} |
|
|
|
//UI Interface |
|
func_get_lang_cookie(); |
|
|
|
$('#IDOK').val(IDOK); |
|
|
|
var result = document.querySelector('.result'), |
|
img_result = document.querySelector('.img-result'), |
|
img_w = document.querySelector('.img-w'), |
|
img_h = document.querySelector('.img-h'), |
|
options = document.querySelector('.options'), |
|
cropped = document.querySelector('.cropped'), |
|
upload = document.querySelector('#file-input'), |
|
cropper = ''; |
|
|
|
var start_to_upload = -1; |
|
|
|
function My_upload(file_data, listmode_id) { |
|
var form_data = new FormData(); //??cnew FormData() |
|
form_data.append("file", file_data); //????[??file?? |
|
|
|
$.ajax({ |
|
url: "/upload_face_img", |
|
type: "POST", |
|
//mimeType: "image/jpeg", |
|
data: form_data, |
|
mimeType: "multipart/form-data", |
|
//data: makeblob(form_data), |
|
//data: form_data.toDataURL(), |
|
|
|
contentType: false, |
|
processData: false, |
|
async: false, |
|
beforeSend: function (xmlHttp) { |
|
xmlHttp.setRequestHeader("If-Modified-Since", "0"); |
|
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); |
|
//xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); |
|
|
|
}, |
|
success: function (retdata) { |
|
//console.log("[send_radarbg] success"); |
|
//console.info(retdata); |
|
}, |
|
error: function (retdata) { |
|
//console.log("[send_radarbg] error"); |
|
//alert(MESSAGE64); |
|
//console.warn(retdata); |
|
//alert(MESSAGE64); |
|
} |
|
}); |
|
} |
|
|
|
function My_upload_bakeup(file_data, listmode_id) { |
|
var form_data = new FormData(); //??cnew FormData() |
|
form_data.append("file", file_data); //????[??file?? |
|
|
|
$.ajax({ |
|
url: "/upload_face_img", |
|
type: "POST", |
|
//mimeType: "image/jpeg", |
|
data: form_data, |
|
//data: makeblob(form_data), |
|
//data: form_data.toDataURL(), |
|
|
|
contentType: 'application/octet-stream', |
|
processData: false, |
|
async: false, |
|
beforeSend: function (xmlHttp) { |
|
xmlHttp.setRequestHeader("If-Modified-Since", "0"); |
|
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); |
|
//xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); |
|
|
|
}, |
|
success: function (retdata) { |
|
//console.log("[send_radarbg] success"); |
|
//console.info(retdata); |
|
}, |
|
error: function (retdata) { |
|
//console.log("[send_radarbg] error"); |
|
//alert(MESSAGE64); |
|
//console.warn(retdata); |
|
//alert(MESSAGE64); |
|
} |
|
}); |
|
} |
|
|
|
var k_index = -1; |
|
$(".progress-bar").css("visibility", "hidden"); |
|
function makeProgress() { |
|
if (k_index < 100 && k_index >= 0) { |
|
k_index = k_index + 1; |
|
$(".progress-bar").css("visibility", "visible"); |
|
//$(".progress-bar").css("width", k_index + "%").text(k_index + " %"); |
|
$(".progress-bar").css("width", k_index + "%"); |
|
|
|
console.log("k_index:" + k_index.toString()); |
|
|
|
if (k_index == 1) { |
|
g_check_if_run_setting = 1; |
|
$('html, body').scrollTop(0); |
|
|
|
// get result to data uri |
|
var imgSrc = cropper.getCroppedCanvas({ |
|
width: img_w.value // input value |
|
}).toDataURL(); |
|
// remove hide class of img |
|
//cropped.classList.remove('hide'); |
|
//img_result.classList.remove('hide'); |
|
// show image cropped |
|
cropped.src = imgSrc; |
|
|
|
if (cropped.src.length > 100) { |
|
setTimeout(My_upload(cropped.src, 2), 0); |
|
} |
|
|
|
k_index = 94; |
|
} |
|
else if (k_index == 95) { |
|
|
|
} |
|
else if (k_index == 100) { |
|
|
|
$(".progress-bar").css("visibility", "hidden"); |
|
//$(".progress-bar").css("width", "0%").text("0 %"); |
|
$(".progress-bar").css("width", "0%"); |
|
k_index = -1; |
|
g_check_if_run_setting = 0; |
|
} |
|
// Wait for sometime before running this script again |
|
setTimeout("makeProgress()", 200); |
|
} |
|
} |
|
|
|
function func_setUpload_img() { |
|
k_index = 0; |
|
makeProgress(); |
|
} |
|
|
|
// on change show image with crop options |
|
upload.addEventListener('change', e => { |
|
if (e.target.files.length) { |
|
// start file reader |
|
const reader = new FileReader(); |
|
reader.onload = e => { |
|
if (e.target.result) { |
|
// create new image |
|
var img = document.createElement('img'); |
|
img.id = 'image'; |
|
img.src = e.target.result; |
|
// clean result before |
|
result.innerHTML = ''; |
|
// append new image |
|
result.appendChild(img); |
|
// show save btn and options |
|
//save.classList.remove('hide'); |
|
//options.classList.remove('hide'); |
|
// init cropper |
|
|
|
cropper = new Cropper(img); |
|
} |
|
}; |
|
reader.readAsDataURL(e.target.files[0]); |
|
} |
|
}); |
|
|
|
g_check_if_run_setting = 0; |
|
</script> |
|
</body> |
|
</html> |