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.

78 lines
2.7 KiB

{% extends 'index.html' %}
{% load static %}
{% 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">
<div class="d-flex align-items-center justify-content-between mb-4">
<h6 class="mb-0">原图像</h6>
<a href="mb-0">保存</a>
</div>
<img src="{% static 'img/a.png' %}" style="width: 50%" class="border border-info">
</div>
</div>
<form method="post">
{% csrf_token %}
<button type="submit" class="btn btn-outline-primary m-2" style="width: 100%">
点击进行直方图的计算
</button>
</form>
<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">下图是由matplotlib.pyplot库绘制而成</h6>
<a href="">保存</a>
</div>
{% if f %}
<img src="data:image/jpg;base64,{{ f }}" class="border border-info mb-2" width="100%">
{% 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 %}