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＆lt; form＆gt;来实现。或完全用JS（XMLHttpRequest，也经常称为'ajax'，例如在jquery中）。

如果你有基于AJAX的提交，你可能不会问这个问题，所以我假设你有一个HTML＆lt; form＆gt;。要提交框坐标，您需要在表单中添加一些输入：

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

通过表单提交在HTML5画布上保存框的坐标

1 个答案: