HTML5キャンバス上にフォーム提出によって座標を保存する

Question

私は、ビデオを分析するサービスのウェブフロントエンドを設計しています。アップロードした動画に関心領域を指定できるように、最初のフレームを抽出してHTML5キャンバスにPNGとして表示します。

私が使用しているバックグラウンドには、画像上にボックスを描くことができるJavaScriptがあります。私が抱えている問題はこれです：どのように描画されるボックスの座標を保存するのですか？標準のPOSTで行うことは可能ですか？それともジャバスクリプトがそれに関係していますか？

（例えば、[X、Y]座標ボックスの左上隅、プラス幅と高さの）

Answer 1

だけあなたのJSコードは、ボックスの座標に責任があるので、それができるように持っていますブラウザは座標を知っています。

既に提出手続きがありますか？これは、HTML <フォーム>または完全にJS（XMLHttpRequest、jqueryなどの「ajax」とも呼ばれます）で実装できます。

AJAXベースの提出物をお持ちでしたら、おそらくこの質問はしませんので、私はあなたがHTML <フォームを持っていると仮定しています。 （画像はないかもしれないときは、本当に唯一のimg.onload` `内の画像を描画する必要があり

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