Сделайте снимок с веб-камеры и загрузите базу данных, используя django - PullRequest
Новая
       1

Сделайте снимок с веб-камеры и загрузите базу данных, используя django

0 голосов
/ 27 мая 2020

Я работаю над формой, в которой я ввожу данные пользователя, такие как имя, адрес электронной почты и т. Д. c. В той же форме после того, как все данные будут предоставлены, пользователю нужно нажать кнопку «Сделать фото», камера будет запущена, и я могу сделать снимок и отобразить его в теге img в html. Как только все это будет сделано, пользователю необходимо нажать кнопку «Сохранить». Все эти данные, включая изображение, должны быть сохранены в базе данных / моделях, созданных в бэкэнде. Я правильно установил расположение файлов мультимедиа и файлов c. Я застрял в сохранении изображения. Я пробовал много вариантов, но безрезультатно. моя модель для сохранения данных - 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')

My HTML form 

{% extends 'base.html' %}

{% load stati c%} {% block content%} 

  <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>

Views.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')

Используя этот снимок. js файл Я могу сделать фото и заполните файл HTML в теге img 

(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 позволяет сделать снимок и поместить его в тег img

Пожалуйста, наставьте меня. Спасибо

...