Q&A
前提
ubuntu
実現したいこと
USBカメラ映像をchromeでリアルタイム表示し、
映像の上でマウスクリックすると、Ｘ，Ｙ座標がflaskで取得できるようにしたいです。
問題
下記実装でやりたいことを最低限実現できているのですが、
映像をクリックするたびにページがリロードしてしまいます。
該当のソースコード
python
1@app.route('/streaming', methods=['GET', 'POST']) 2def streaming(): 3 if request.method == "POST": 4 print(request) # ← 座標をここから取得 5 6 return render_template('streaming.html')
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>streaming</title> 5 </head> 6 <body> 7 <form action="/test" method="POST"> 8 <input type="image" name="test" src="{{ url_for('feed_stream') }}" > 9 </form> 10 </body> 11</html>
補足情報（FW/ツールのバージョンなど）
上記に限らず、jsなどで座標情報をローカルフォルダに出力するなどでも構いませんが、
ダウンロード先を指定するなどの操作が不要な方法が望ましいです。
（常に事前に設定した場所に勝手に出力してほしい。）
リロードさせずにflask側で座標情報を取得する方法を教えて頂けないでしょうか。
回答1件
0
ベストアンサー
クリックするたびにページがリロード
<input> 要素の image 型は、テキストではなく画像の形をとる送信ボタン、すなわち送信ボタンを作成するために使用されます。
<input type="image"> - HTML: HyperText Markup Language | MDN
とのことなので、フォームを送信してしまっていると思います。
クリックイベントを拾って、.offsetX などをfetchで送信するのがよさそうです。
MouseEvent.offsetX - Web API | MDN
Fetch API - Web API | MDN
投稿2022/04/15 03:22
総合スコア36074
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/04/15 11:30