Сохранить координаты поля на холсте HTML5 путем отправки формы

Question

Я разрабатываю веб-интерфейс для службы, которая анализирует видео.Чтобы пользователи могли указать интересующую область в загружаемых ими видео, я извлекаю первый кадр и представляю его в виде PNG на холсте HTML5.

<!-- HTML here -->
<script type="text/javascript">
var canvas = document.getElementById('theCanvas');
var context = canvas.getContext('2d');
var img = new Image();
img.src = document.getElementById('image').value;
context.drawImage(img, 0, 0);
</script>
<input type="hidden" id="image" value="{PHP inserts path to image here}" />

На заднем плане есть JavaScript, которыйЯ использую, чтобы позволить пользователям нарисовать прямоугольник на изображении.Проблема у меня заключается в следующем: как мне сохранить координаты нарисованного окна? Можно ли это сделать поверх стандартного POST?Или в этом тоже присутствует javascript?

(например, [x, y] координаты верхнего левого угла поля плюс ширина и высота)

Answer 1

Поскольку за координаты ящика отвечает только ваш JS-код, он должен сообщить браузеру координаты.

У вас уже есть процесс отправки?Это может быть реализовано через HTML или полностью в JS (XMLHttpRequest, также часто называемый «ajax», например, в jquery).

Если у вас была отправка на основе AJAX, вы, вероятно, не спросили бывопрос, поэтому я предполагаю, что у вас есть HTML .Чтобы отправить координаты поля, вам нужно добавить несколько входных данных в форме:

<!-- Instead of this you have a canvas with the box-selecting JS code.
     When the user makes a selection, code similar to setCoords should
     execute with the actual coordinates the user selected. -->
<input type="button" value="Set coordinates" onclick="setCoords(0,0,0,0)">

<form action="...">
  <input id="x" name="x" type="hidden">
  <input id="y" name="y" type="hidden">
  <input id="w" name="w" type="hidden">
  <input id="h" name="h" type="hidden">
  <input type="submit">
</form>

<script>
  function setCoords(x,y,w,h) {
    document.getElementById("x").value = x;
    // ...
  }
</script>