Отправка элемента холста в форму

Мне удалось получить это далеко от различных руководств и ответов на другие вопросы, но теперь я застрял. У меня есть эта форма

HTML

<!DOCTYPE html>
<html>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link href = "https://fonts.googleapis.com/css?family=Raleway" 
rel = "stylesheet">
<link rel = "stylesheet" href = "style.css">

<body>

<form id = "regForm" action = "sqlIn.php" method = "post">

<h1>Welcome</h1>
  <!-- One "tab" for each step in the form: -->
  <div class = "tab">
    <div id = "capture"><video id = "player" autoplay><canvas id = "canvas"> 
</canvas></video></div>
    <script src = "camera.js"></script>

  <p><input placeholder = "First name..." oninput = "this.className = ''" 
name = "fname">
  <input placeholder = "Last name..." oninput = "this.className = ''" 
name = "lname"></p>
    </div>
    <!-- One "tab" for each step in the form: -->
  <div class = "tab">How can we contact you whilst on site?
    <p><input placeholder = "Phone number" oninput = "this.className = ''" 
name = "Dir_phone"></p>
  </div>
    <!-- One "tab" for each step in the form: -->
  <div class = "tab">Who do you work for?
    <p><input placeholder = "dd" oninput = "this.className = ''" name = "dd"></p>
  </div>
<!-- One "tab" for each step in the form: -->
  <div class = "tab">Please read our Induction:
    <p><input placeholder = "Username..." oninput = "this.className = ''" 
name = "uname"></p>
  </div>
    <!-- One "tab" for each step in the form: -->
  <div style = "overflow:auto;">
    <div style = "float:right;">
      <button type = "button" id = "prevBtn" 
onclick = "nextPrev(-1)">Previous</button>
      <button type = "button" id = "nextBtn" onclick = "nextPrev(1)">Next</button>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style = "text-align:center;margin-top:40px;">
    <span class = "step"></span>
    <span class = "step"></span>
    <span class = "step"></span>
    <span class = "step"></span>
  </div>

</form>
  <!-- Link to the javascript for form animation/flow -->
  <script src = "form.js"></script>
</body>
</html>

CSS

'* {
  box-sizing: border-box;
}

html {
 background: url(wood-is-at-the-heart.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

#regForm {
  background-color: #ffffff;
   margin: 100px auto;
  border-radius: 10px;
  box-shadow: 4px 4px 3px #245223;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}
#player{
  display: inline-block;
  height:400px;
  width:500px;
  margin: 0px;
}
#capture{
  diplay:inline;
  padding: 0px;
  height:400px;
  width:500px;
  margin: 0 auto;
}

и, наконец, JS

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the crurrent tab

  function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == x.length - 1) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n);
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x,
    y,
    i,
    valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " 
finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i,
    x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
// and the code to show camera and get the image to a canvas.
const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');

const constraints = {
  video: true,
};

captureButton.addEventListener('click', () => {
  context.drawImage(player, 0, 0, canvas.width, canvas.height);

  // Stop all video streams.
  player.srcObject.getVideoTracks().forEach(track => track.stop());
});

navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
    // Attach the video stream to the video element and autoplay.
    player.srcObject = stream;
  });

Я пробовал различные варианты помещения изображения холста в переменную, а затем устанавливал скрытый ввод как таковой, но, похоже, ничего не добился с ним? у меня есть все остальные элементы формы, отправленные по почте в базу данных mysql

Как только это будет сделано, я перейду к формированию логики и перейду к вопросам, основанным на условиях, а затем после этого автозаполнения, чтобы проверить, есть ли уже запись. Я учусь по мере того, как собираюсь, так как мои предыдущие знания пришли к нам еще до того, как появился CSS. Вы можете просмотреть это в коде

See the Pen Веб-форма by mark (@markarobinson) on CodePen.

Я постараюсь ответить на любые вопросы, если потребуется дополнительная информация.

Спасибо

Afaik, элементы холста не считаются элементами ввода формы, поэтому вам нужно использовать скрытые входы или выполнять запрос POST вручную, чтобы у вас был полный контроль над данными, которые публикуются внутри сценария, вместо того, чтобы полагаться на <form> по умолчанию поведение.

— 28.11.2018 17:55

Да, изображение берется с видеовхода, а затем рисуется на холсте, это следующий шаг, с которым я борюсь. Я бы предпочел, чтобы он был загружен в файл и URL-адрес в базе данных, но для количества изображений, которые я буду хранить, может быть подходящим BLOB. Как я уже сказал, у меня есть только приблизительное понимание, и это скорее обучающее упражнение, чем что-либо еще. Спасибо за твой ответ.

— 28.11.2018 18:04

javascript css html forms html5-canvas

28.11.2018 17:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

398

Другие вопросы по теме

Как выбрать класс :: - webkit- в JS / JQuery

Как установить значение переменной TypeScript как свойство CSS?

Бутстрап не выравнивается только на одной странице

Angular 6 Themeing: как установить цвет фона и использовать его во всем приложении

Изменить размер изображения заголовка во всех сообщениях в wordpress

Перемещение элемента управления меткой материала

Переполнение заблокированного скрипта прокрутки

JQuery переключает все абзацы на 1 кнопку, не работает

Символы Unicode, появляющиеся в html в веб-просмотре Android

Убедитесь, что секция находится выше сгиба в CSS

Отправка элемента холста в форму

Другие вопросы по теме

Похожие вопросы