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

我正在为一项分析视频的服务设计一个web前端。为了允许用户在他们上传的视频中指定感兴趣的区域，我提取第一帧并在HTML5画布中将其显示为PNG

<!-- 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}" />

var canvas=document.getElementById（'theCanvas'）；
var context=canvas.getContext（'2d'）；
var img=新图像（）；
img.src=document.getElementById（'image'）。值；
drawImage（img，0,0）；

背景中有javascript，我使用它允许用户在图像上绘制一个框。我遇到的问题是：如何保存绘制框的坐标？是否可以在标准贴子上保存？或者也有javascript参与其中

---

（例如，方框左上角的[x，y]坐标，加上宽度和高度）

由于只有您的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>

函数setCoords（x，y，w，h）{
document.getElementById（“x”）.value=x；
// ...
}

你真的应该只在

img.onload

中绘制图像，目前你正在绘制图像，而图像可能还没有（完全）加载。对不起，我有点像JS noob…你介意用一个例子来阐述这一点吗？也许我读错了，但你现在已经有任何框选择代码了吗？这里是magsol，@pimvdb：我遗漏了那部分；在我编写的代码块上方有一个canvas标记，加上一个相当大的javascript文件，用于处理方框图。它工作得很好，所以我觉得不需要包含所有的代码，但如果这有帮助的话，我可以发布它；谢谢你让它具体化！工作起来很有魅力。