我正在开发一个 Django 应用程序,用户可以使用 JavaScript 触发网络摄像头并拍摄照片。这张图片存储在 Canvas 中。我想用 python 检索该图像作为 base64 字符串,将其转换为 png 文件并将其保存到 Django 服务器中。这是我到目前为止的代码
HTML 模板
<center>
<button type="button" name="button" class='btn btn-outline-dark btn-lg' id='start'>Start Video Capture</button>
<div class="container-fluid mt-2">
<video id="video" width="640" height="480" autoplay></video><br>
<button type="button" data-toggle="modal" data-target="#image_model" class="btn btn-lg btn-dark" id="snap">Snap Photo</button>
</div>
</center>
<center>
<canvas id="canvas" width="640" height="480"></canvas>
</center>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Retake</button>
<form class="image_to_server" action="{% url 'img_submit' %}" method="post">
{% csrf_token %}
<input type="text" name="base64Field" value="" id='base64'>
<input type="submit" value="Use Image" class="btn btn-primary" id="use_image">
</form>
Javascript代码
// Grab elements, create settings, etc.
var video = document.getElementById('video');
// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
$('#start').click(function() {
// Get access to the camera!
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true
}).then(function(stream) {
//video.src = window.URL.createObjectURL(stream);
video.srcObject = stream;
video.play();
});
}
$('#snap').fadeIn();
// Trigger photo take
$('#snap').click(function() {
context.drawImage(video, 0, 0, 640, 480);
var dataURL = canvas.toDataURL();
$('#base64').val(dataURL)
$("#use_image").click(function() {
console.log('clicked');
});
});
});
Django View .py
def img_submit(request):
if request.method == 'POST':
data = request.POST.get('base64Field')
byte_data = base64.b64decode(data)
image_data = BytesIO(byte_data)
img = Image.open(image_data)
return HttpResponse(data)
我收到 python 代码的“填充错误错误”。我不确定我做错了什么。或者如何纠正此错误。
我关注了这个link编写Python代码。
最佳答案
您没有从字符串中删除 header ,这意味着它不仅仅是 b64 数据
如果您查看示例,您会看到这些行
import re
base64_data = re.sub('^data:image/.+;base64,', '', data)
删除 header 后,您应该能够将字符串用作 b64
我所说的标题看起来像这样 data:image/png;base64,
关于javascript - 使用python将base64字符串转换为png图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55916757/