图片识别网页：使用 HTML、CSS、JavaScript 和 Flask 实现
这是一个简单的图片识别网页示例，使用了 HTML、CSS 和 JavaScript，以及一个 Flask 后端来处理图片上传和识别。
HTML 文件 (index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>图片识别网页</title>
<link rel='stylesheet' type='text/css' href='{{ url_for('static', filename='style.css') }}'>
</head>
<body>
<div class='container'>
<h1>图片识别网页</h1>
<div class='panel'>
<input id='file-upload' class='hidden' type='file' accept='image/*' />
<label for='file-upload' id='file-drag' class='upload-box'>
<div id='upload-caption'>将图片拖放到此处或点击选择</div>
<img id='image-preview' class='hidden' />
</label>
</div>
<div>
<button id='submit-button' class='button hidden' onclick='submitImage()'>识别</button>
<button id='clear-button' class='button hidden' onclick='clearImage()'>清除</button>
</div>
<div id='result' class='hidden'></div>
</div>
<script src='{{ url_for('static', filename='script.js') }}'></script>
</body>
</html>
CSS 文件 (style.css)
.container {
max-width: 600px;
margin: 0 auto;
text-align: center;
padding: 20px;
}
.panel {
margin-bottom: 20px;
}
.upload-box {
border: 2px dashed #aaa;
padding: 20px;
cursor: pointer;
}
#image-preview {
max-width: 100%;
max-height: 200px;
margin-top: 10px;
}
.button {
margin: 5px;
}
.hidden {
display: none;
}
JavaScript 文件 (script.js)
function submitImage() {
var fileInput = document.getElementById('file-upload');
var file = fileInput.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function(e) {
var imagePreview = document.getElementById('image-preview');
imagePreview.src = e.target.result;
imagePreview.classList.remove('hidden');
document.getElementById('submit-button').classList.remove('hidden');
document.getElementById('clear-button').classList.remove('hidden');
}
reader.readAsDataURL(file);
}
}
function clearImage() {
var fileInput = document.getElementById('file-upload');
fileInput.value = '';
document.getElementById('image-preview').classList.add('hidden');
document.getElementById('submit-button').classList.add('hidden');
document.getElementById('clear-button').classList.add('hidden');
}
// 在这里添加与后端的交互逻辑，发送图片给Flask后端进行识别并显示结果
Flask 后端 (app.py)
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/predict', methods=['POST'])
def predict():
# 在这里实现图片识别的代码逻辑
image = request.files['image']
# 进行图片识别的预测
# ...
# 返回识别结果
return '识别结果：动物名称'
if __name__ == '__main__':
app.run(debug=True)
请注意，上述示例仅提供了一个基本的图片识别网页的结构，您需要根据实际需求进行适当的修改和调整，以便与您的图片识别系统集成。同时，您需要在后端实现图片识别的具体逻辑。
原文地址: https://www.cveoy.top/t/topic/be42 著作权归作者所有。请勿转载和采集!