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.
80 lines
3.2 KiB
80 lines
3.2 KiB
{% extends 'index.html' %}
|
|
{% block content %}
|
|
<!-- Sales Chart Start -->
|
|
<div class="container-fluid pt-4 px-4">
|
|
<div class="row g-4">
|
|
<div class="col-sm-12 col-xl-6" style="width: 100%">
|
|
<div class="bg-secondary text-center rounded p-4">
|
|
<form method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
|
<h6 class="mb-0">图像预览</h6>
|
|
<button type="submit" class="btn btn-outline-warning m-2">点击开始转换</button>
|
|
</div>
|
|
<div>
|
|
<label for="formFileLg" class="form-label">请上传一张图像来进行</label>
|
|
<div style="font-weight: bold;font-size: 20px;margin-bottom: 20px">使用log算子实现图像腐蚀操作</div>
|
|
<input class="form-control form-control-lg bg-dark" name="img" id="imgOne"
|
|
onchange="preImg(this.id,'photo');" type="file">
|
|
<br>
|
|
|
|
<img id="photo" src="" class="border border-info" width="100%" style="display: block;"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-xl-6" style="width: 100%">
|
|
<div class="bg-secondary text-center rounded p-4">
|
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
|
<h6 class="mb-0">输出图像</h6>
|
|
<a href="">保存</a>
|
|
</div>
|
|
{% if image1 %}
|
|
<div>输出图像</div>
|
|
<img src="data:image/jpg;base64,{{ image1 }}" class="border border-info mb-2" >
|
|
{% else %}
|
|
<div style="width: 100%;height: 188px;display: flex;align-content: center;align-items: center;justify-items: center;justify-content: center">
|
|
<div>暂时还未有输出图片</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Sales Chart End -->
|
|
|
|
|
|
{% endblock %}
|
|
{% block js %}
|
|
<script type="text/javascript">
|
|
function getFileUrl(sourceId) {
|
|
var url;
|
|
if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
|
|
url = document.getElementById(sourceId).value;
|
|
} else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
|
|
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
|
|
} else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
|
|
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
|
|
}
|
|
return url;
|
|
}
|
|
|
|
function preImg(sourceId, targetId) {
|
|
var url = getFileUrl(sourceId);
|
|
var imgPre = document.getElementById(targetId);
|
|
imgPre.src = url;
|
|
}
|
|
</script>
|
|
<script>
|
|
|
|
</script>
|
|
|
|
{% endblock %}
|
|
|
|
|
|
|
|
|
|
|
|
|