通過表單提交在HTML5畫布上保存框的座標

我正在爲分析視頻的服務設計一個Web前端。爲了允許用戶在他們上傳的視頻中指定感興趣的區域，我將提取第一幀並將其作爲PNG呈現在HTML5畫布中。通過表單提交在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]框的左上角，加上寬度和高度的座標）

來源

2011-10-21 Magsol

您真的應該只在'img.onload'中繪製圖像，當前圖像可能不是完全）加載。 – pimvdb

對不起，我是一個JS noob ......你想介紹一下這個例子嗎？ – Magsol

也許我誤讀了，但是您目前是否已經有任何選擇框的代碼？ – pimvdb

因爲只有你的JS代碼負責箱子座標，它讓瀏覽器知道座標。

您是否有提交過程？它可以通過HTML> < form>或完全在JS中實現（XMLHttpRequest，通常也稱爲'ajax'，例如在jquery中）。

如果你有基於AJAX的提交，你可能不會問這個問題，所以我假設你有一個HTML < form>。要提交框座標，您需要在表單中添加幾個輸入：

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

來源

2011-10-22 23:12:52 Nickolay

這就是在我心中凝聚的方法;感謝使它具體！奇蹟般有效。 – Magsol

通過表單提交在HTML5畫布上保存框的座標

回答

相關問題