使用 JS 从网络摄像头捕获的图像并使用 PythonDjango保存在文件夹中

如何解决使用 JS 从网络摄像头捕获的图像并使用 PythonDjango保存在文件夹中

我正在尝试使用 JavaScript 从网络摄像头保存捕获的图像并将其保存到 django 中的媒体文件夹。我可以捕获图像并将图像保存在所需的文件夹中，但是当尝试查看时，它显示为空白（暗）。我用 Pillow 来保存我的图像。

也许我的图像保存过程有误，但我找不到错误。有人可以帮我吗。

模板

{% extends 'base.html' %}
{% load static %}

{% block js %}
<script src="{% static 'js/webcam.js' %}"></script>
{% endblock %}

{% block main %}
    <div class="container">
        <form method='POST' id='the-form'>
            {% csrf_token %}
            <div class="main-wrapper">
                <p><span id="errorMsg"></span></p>
                <div class="main-header">
                    <!-- Stream video via webcam -->
                    <div class="video-wrap">
                        <video id="video" playsinline autoplay></video>
                    </div>
                </div>
                <div class="main-Box">
                    <!-- Trigger canvas web API -->
                    <div class="controller">
                        <a id="snap" class='btn btn-info btn-lg'>Capture</a>
                    </div>
                </div>

                <!-- Webcam video snapshot -->
                <div class='snapshot'>
                    <div>
                        <canvas id="canvas" width="640" height="480"></canvas>
                    </div>
                </div>
                <div class='button-wrapper'>
                    <div>
                        <input type="hidden" name='captured-image' id='cimg'>
                        <a class='btn btn-warning btn-lg' onclick="drawpolygon()">Draw</a>
                        <button class='btn btn-success btn-lg'>Submit</button>
                        <a class='btn btn-danger btn-lg' onclick="ClearCanvas()">Clear</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

JS代码

const video  = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap   = document.getElementById('snap');
const errorMsgElement = document.querySelector('span#errorMsg');

var constraints = {video: { width: 1280,height: 720 }};

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedMetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); });

var context = canvas.getContext('2d');
document.getElementById("snap").addEventListener("click",function() {
    context.drawImage(video,0);
})
document.getElementById('cimg').value = canvas.toDataURL('image/png');

views.py

from .random_generator import random_filename
from django.shortcuts import render,redirect
from django.conf import settings
from io import BytesIO
from PIL import Image
import base64

def webcam(request):
    if request.POST:
        img_data = request.POST.get('captured-image')
        img_data = re.sub("^data:image/png;base64,","",img_data)
        img_data = base64.b64decode(img_data)
        img_data = BytesIO(img_data)

        filename = random_filename()+'.png'
        image = Image.open(img_data)
        image.save(settings.MEDIA_ROOT /filename) 
        return redirect('home')
    return render(request,'webcam.html')