python - 使用 django 捕获网络摄像头图像并上传数据库

Question

我正在制作一个表单，其中我正在获取用户详细信息，例如姓名、电子邮件电话等。在提供所有数据后，在同一个表单中，用户需要单击“拍照”按钮，相机启动，我能够捕获图像并显示在html中的img标签中。完成这一切后，用户需要单击“保存”按钮。所有这些数据(包括图像)都需要保存在后端创建的数据库/模型中。我已正确设置媒体和静态文件位置。我被困在保存图像中。我尝试了很多选择，但没有帮助。我的模型保存数据 - models.py

class UserDetails(models.Model):
    User_name = models.CharField(max_length= 300)
    User_phone = models.BigIntegerField()
    User_address = models.TextField()
    User_pic = models.FileField(upload_to='documents/%Y/%m/%d')

我的 HTML 表单

{% extends 'base.html' %}

{%加载静态%}{% block 内容 %}

  <div class="container-fluid">
    <div class="row">
     <div class="col-md-8">  
        <div id="accordion" role="tablist">

            <form method="POST" action="/usersave/" enctype="multipart/form-data">
                {% csrf_token %}
                  ....

               <div class="card-body">
                 <div class="row">
                   <div class="col-md-4 ml-auto mr-auto">
                      <div class="form-group">                                
                         <video id="video" autoplay ></video>                               
                         <canvas id="canvas"></canvas>                                
                   </div>
             <button id="startbutton1" class="btn btn-outline-secondary btn-sm">Take Photo</button>
                          <script src="{% static "assets/js/capture.js" %}"></script> 
                        </div>

                        .....
                    <div class="img  pull-center" >                                            
                    <img id ="photo" name="photo" alt="The screen capture will appear in this box.">                   
          </form>
      </div>                
    </div>  
 </div>

View .py

def usersave(request):
if request.method== 'POST':        
    User_name = request.POST["Username"]
    User_phone = request.POST["Userphone"]
    User_address = request.POST["Useraddress"]
    pic = request.FILES["photo"]
    User_info= UserDetails(User_name=User_name, User_phone=User_phone, User_address=User_address, User_pic= pic)
    User_info.save()    
    return render(request, 'some.html')

使用这个 capture.js 文件，我可以拍照并填充 img 标签中的 HTML 文件

(function() {

var width = 320;    
var height = 0;    
var streaming = false;  
var video = null;
var canvas = null;
var photo = null;
var startbutton1 = null;

function startup() {
  video = document.getElementById('video');
  canvas = document.getElementById('canvas');
  photo = document.getElementById('photo');
  startbutton1 = document.getElementById('startbutton1');

  navigator.mediaDevices.getUserMedia({video: true, audio: false})
  .then(function(stream) {
    video.srcObject = stream;
    video.play();
  })
  .catch(function(err) {
    console.log("An error occurred: " + err);
  });

  video.addEventListener('canplay', function(ev){
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth/width);


      if (isNaN(height)) {
        height = width / (4/3);
      }

      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }
  }, false);

  startbutton1.addEventListener('click', function(ev){
    takepicture();
    ev.preventDefault();
  }, false);

  clearphoto();
}

function clearphoto() {
  var context = canvas.getContext('2d');
  context.fillStyle = "#AAA";
  context.fillRect(0, 0, canvas.width, canvas.height);

  var data = canvas.toDataURL('image/png');
  photo.setAttribute('src', data);
}

function takepicture() {
  var context = canvas.getContext('2d');
  if (width && height) {
    canvas.width = width;
    canvas.height = height;
    context.drawImage(video, 0, 0, width, height);

    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  } else {
    clearphoto();
  }
}
window.addEventListener('load', startup, false);

})();

Take Photo button allows to capture the photo and put it in img tag

请指导我。谢谢

Answer 1

我认为这个答案会有帮助。

让我们从后端实现开始回答:在您的 models.py 中，我更喜欢使用图像字段而不是文件字段。

class Image(models.Model):
    username = models.CharField(max_length=30)
    image = models.ImageField(upload_to='images')

首先，仔细配置您的媒体目录。

您的 urls.py 模块应如下所示。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.image_upload, name='image_upload'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

您应该在 settings.py 中定义 MEDIA_ROOT 和 MEDIA_URL。

BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

您的views.py应如下所示，假设图像是使用POST请求上传的。

# Import these methods
from django.core.files import File
from django.core.files.base import ContentFile
from django.core.files.temp import NamedTemporaryFile


def image_upload(request):
    context = dict()
    if request.method == 'POST':
        username = request.POST["username"]
        image_path = request.POST["src"]  # src is the name of input attribute in your html file, this src value is set in javascript code
        image = NamedTemporaryFile()
        image.write(urlopen(path).read())
        image.flush()
        image = File(image)
        name = str(image.name).split('\\')[-1]
        name += '.jpg'  # store image in jpeg format
        image.name = name
        if image is not None:
            obj = Image.objects.create(username=username, image=image)  # create a object of Image type defined in your model
            obj.save()
            context["path"] = obj.image.url  #url to image stored in my server/local device
            context["username"] = obj.username
        else :
            return redirect('/')
        return redirect('any_url')
    return render(request, 'index.html', context=context)  # context is like respose data we are sending back to user, that will be rendered with specified 'html file'.         

要检查网络摄像头图像数据如何发送到服务器，请参阅此问题的答案。 How can I capture a picture from webcam and store it in a ImageField or FileField in Django?

当从网络摄像头捕获图像时，输入字段的源 (src) 包含 URL 数据。在服务器端， request.POST["src"] 实际上为我们提供了 URL 数据，这是临时空间中该图像的路径。

现在，是时候讨论前端实现了:要实现网络摄像头接口(interface)，请引用这篇优秀教程 here .

我们使用WebRTC API来实现它。尽管有很多方法，但我更喜欢使用 WebRTC API。

因此，您的 HTML 代码几乎如下所示:

<!doctype html>
<html>
    {% block content %}
    {% load static %}
    <head>
        <title>VisionApp</title>
        <meta charset='utf-8'>
        <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" media="all">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="module" src="{% static 'js/index.js' %}"></script>
    </head>
    <body>
        <div class="contentarea">
            <div class="Input">
                <form method="POST" name="inputForm" enctype='multipart/form-data'>
                    {% csrf_token %}
                    <div id="camera" class="camera">
                        <video id="video">Video stream not available.</video>
                        <button id="startbutton" type="button">Take photo</button>
                        <input id="webimg" value="" name="src" type="text" style="display: none;">
                        <canvas id="canvas">
                        </canvas>
                    </div>
                    <br>
                    <div>
                        <img id="photo" alt="your image">
                    </div>
                    <br>
                    <button type="submit" class="button" id="submit">Submit</button>
                </form>
            </div>
           <img src="{{ path }}" alt="The screen capture will appear in this box.">
        </div>
    </body>
    {% endblock %}
</html>

这里 src = "{{ path }}"，路径值来自上下文。 id="photo"的 img 属性值是在 javascript 中设置的。

CSS 代码如下:

#video {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:320px;
  height:240px;
}

#photo {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:320px;
  height:240px;
}

#canvas {
  display:none;
}

.camera {
  width: 340px;
  display:inline-block;
}

.output {
  width: 340px;
  display:inline-block;
}

#startbutton {
  display:block;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  bottom:32px;
  background-color: rgba(0, 150, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  color: rgba(255, 255, 255, 1.0);
}

.contentarea {
  font-size: 16px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  width: 760px;
}

现在，您的 JavaScript 文件最终可能如下所示:

(function() {
  // The width and height of the captured photo. We will set the
  // width to the value defined here, but the height will be
  // calculated based on the aspect ratio of the input stream.

  var width = 320;    // We will scale the photo width to this
  var height = 0;     // This will be computed based on the input stream

  // |streaming| indicates whether or not we're currently streaming
  // video from the camera. Obviously, we start at false.

  var streaming = false;

  // The various HTML elements we need to configure or control. These
  // will be set by the startup() function.

  var video = null;
  var canvas = null;
  var photo = null;
  var startbutton = null;

  function startup() {
    video = document.getElementById('video');
    canvas = document.getElementById('canvas');
    photo = document.getElementById('photo');
    startbutton = document.getElementById('startbutton');

    navigator.mediaDevices.getUserMedia({video: true, audio: false})
    .then(function(stream) {
      video.srcObject = stream;
      video.play();
    })
    .catch(function(err) {
      console.log("An error occurred: " + err);
    });

    video.addEventListener('canplay', function(ev){
      if (!streaming) {
        height = video.videoHeight / (video.videoWidth/width);
      
        // Firefox currently has a bug where the height can't be read from
        // the video, so we will make assumptions if this happens.
      
        if (isNaN(height)) {
          height = width / (4/3);
        }
      
        video.setAttribute('width', width);
        video.setAttribute('height', height);
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        streaming = true;
      }
    }, false);

    startbutton.addEventListener('click', function(ev){
      takepicture();
      ev.preventDefault();
    }, false);
    
    clearphoto();
  }

  // Fill the photo with an indication that none has been
  // captured.

  function clearphoto() {
    var context = canvas.getContext('2d');
    context.fillStyle = "#AAA";
    context.fillRect(0, 0, canvas.width, canvas.height);

    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  }
  
  // Capture a photo by fetching the current contents of the video
  // and drawing it into a canvas, then converting that to a PNG
  // format data URL. By drawing it on an offscreen canvas and then
  // drawing that to the screen, we can change its size and/or apply
  // other changes before drawing it.

  function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);
    
      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    } else {
      clearphoto();
    }
  }

  // Set up our event listener to run the startup process
  // once loading is complete.
  window.addEventListener('load', startup, false);
})();

希望这些代码片段对您有所帮助!谢谢!