htmlに表示された画像を post requestで送りたいのですが、どのように画像をhtmlから取得できるのでしょうか？

open-cv でライブ映像を取得して、ボタンをクリックしたところで一枚の画像を生成して、
image.htmlで撮られた写真を表示しています。
image.htmlでは、２つのボタンが表示されていて、一つは　再度写真を撮り直すボタン、一つはその写真を使ってpost requestを djangoに送るボタンです。

image.html

python
1{% block content %}
2
3<p class="border" style="padding:10px;">Use this photo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
4    <a class="btn btn-outline-info" href="/send" role="button">Select</a> 
5</p>
6
7<p class="border" style="padding:10px;">Take an another photo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
8    <a class="btn btn-outline-info" href="{{request.META.HTTP_REFERER}}" role="button">Take an another photo</a> 
9</p>
10
11
12<p>
13    <img src="/image_feed" width="810" height="540"/>
14</p>
15
16
17{% endblock %}
18
19
20
21
22

python
1# ストリーミング画像・映像を表示するview
2class IndexView(View):
3    def get(self, request):
4        return render(request, 'index.html', {})
5
6# ストリーミング画像を定期的に返却するview
7def video_feed_view():
8    return lambda _: StreamingHttpResponse(generate_frame(), content_type='multipart/x-mixed-replace; boundary=frame')
9
10# # フレーム生成・返却する処理
11def generate_frame():
12    capture = cv2.VideoCapture(0)  # USBカメラから
13
14    while True:
15        if not capture.isOpened():
16            print("Capture is not opened.")
17            break
18        # カメラからフレーム画像を取得
19        ret, frame = capture.read()
20        if not ret:
21            print("Failed to read frame.")
22            break
23        # フレーム画像バイナリに変換
24        ret, jpeg = cv2.imencode('.jpg', frame)
25        byte_frame = jpeg.tobytes()
26        # フレーム画像のバイナリデータをユーザーに送付する
27        yield (b'--frame\r\n'
28               b'Content-Type: image/jpeg\r\n\r\n' + byte_frame + b'\r\n\r\n')
29    capture.release()
30
31
32#一枚の写真を表示するための処理
33class ImageView(View):
34    def get(self, request):
35        return render(request, 'image.html', {})
36
37def image_feed_view():
38    return lambda _: HttpResponse(generate_one_frame(), content_type='image/jpeg')
39
40from django.http import HttpResponse
41def generate_one_frame():
42
43    capture = cv2.VideoCapture(0) 
44    count=0
45    while True:
46        count=count+1
47        if count>=10:
48            break
49
50        if not capture.isOpened():
51            print("Capture is not opened.")
52            break
53
54        # カメラからフレーム画像を取得
55        ret, frame = capture.read()
56        if not ret:
57            print("Failed to read frame.")
58            break
59
60        # フレーム画像バイナリに変換
61        ret, jpeg = cv2.imencode('.jpg', frame)
62        byte_frame = jpeg.tobytes()
63        # フレーム画像のバイナリデータをユーザーに送付する
64
65    capture.release()
66    return byte_frame
67
68

urls.py

python
1from django.contrib.staticfiles.urls import staticfiles_urlpatterns
2from django.conf.urls.static import static
3from django.urls import path
4from . import views
5
6urlpatterns = [
7    path('', views.IndexView.as_view()),
8    path('video_feed', views.video_feed_view(), name="video_feed"),
9
10    path('image',views.ImageView.as_view(), name='image'),
11    path('image_feed',views.image_feed_view(), name="image_feed"),
12]
13urlpatterns += staticfiles_urlpatterns()
14

https://deecode.net/?p=382 引用サイト。

meg_

2023/01/30 15:46 編集

> open-cv でライブ映像を取得して、ボタンをクリックしたところで一枚の画像を生成して、 image.htmlで撮られた写真を表示しています。 > どのように画像をhtmlから取得できるのでしょうか？その「画像」をサーバーに保存もしておくでは駄目でしょうか？

alizona

2023/01/30 15:54

ありがとうございます。 > その「画像」をサーバーに保存もしておくでは駄目でしょうか？ httpresponseでフォームにセットすることができないのであれば、サーバーに保存しようと思いました。そうなると、画像が切り取られた時にサーバーに送信し、 image.htmlではサーバーから取得した画像を表示し、ボタンで　「再度撮影」が押された場合にはサーバーから削除。「撮影した画像を送信」が押された場合には、post で views.py へ送信。にしようと思います。

meg_

2023/01/30 15:59

サーバーからクライアントに画像データを送っているのですよね？それを「どのように画像をhtmlから取得できるのでしょうか？」というのが分かりません。画像ファイルとして保存せずともサーバーのメモリ上に保持しておけば良さそうにも思います。（Djangoは使わないので詳細は分かりませんが）

alizona

2023/01/30 16:07

現在、localhostでやっていたので、サーバーに保存されているという感覚がありませんでした。

alizona

2023/01/30 16:08

capture ボタンが押された時点でのフレーム画像を、httpresponseで画面に表示してるだけなので、保存とかはしていないと思うのですが。そのため、httpresponse で送った jpeg.tobyte() はサーバーのメモリ上に保存されていないと思ったのですが合っていますでしょうか？

退会済みユーザー

2023/01/31 00:09

ブラウザ上で質問に書いてあった html の、 <img src="/image_feed" width="810" height="540"/> に画像が表示されている状態から、その画像データを JavaScript で取得してサーバーに送信するという話ですか？

退会済みユーザー

2023/01/31 22:19

質問者さん、無言ですが、回答したのでそれに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。とにかく無言は NG です。

alizona

2023/01/31 23:07

すみません。テラテイルは見ていたのに気づいてませんでした。今から読ませていただきます。回答ありがとうございます。無視はするつもりもしたこともありません。申し訳ありません。

退会済みユーザー

2023/02/02 22:27

本題の、 > htmlに表示された画像を post requestで送りたいのですが、どのように画像をhtmlから取得できるのでしょうか？には回答済みです。質問のコメントで「画像は読み込めているのですが」とのことですので本題は解決できているのですよね。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。前にも言いましたが無言で放置は NG です。

退会済みユーザー

2023/02/11 02:08

質問者さん、回答したのでそれに対するフィードバック (役に立った/立たなかった。役に立たなかったならどこがダメだったかなど) を返してください。

行動規範の内容に同意します

回答1件

htmlに表示された画像を post requestで送りたいのですが、どのように画像をhtmlから取得できるのでしょうか？

ブラウザ上に表示されている画像、すなわち質問に書いてあった html の、

<img src="/image_feed" width="810" height="540"/>

でブラウザ上に画像が表示されている状態から、その画像データを JavaScript で取得してサーバーに送信するという話と理解してレスします。

img 要素の画像を canvas に描画し、canvas の画像データを Data URL 形式（"data:image/jpeg;base64, ..." という文字列）で取得して JSON 文字列を組み立てて fetch API でサーバーに送信するという方法はいかがですか？

サンプルコードを以下に載せておきます。ASP.NET Core MVC の View のものですが、html とJavaScript のコードはそのまま使えるはずです。（BASE64 でエンコードされているので、バイナリ形式よりサイズが約 1.3 倍大きくなってしまいますが・・・）

html+javascript
1@{
2    ViewData["Title"] = "UploadImage";
3}
4
5<h1>UploadImage</h1>
6
7<input id="button1" type="button" value="Upload" />
8<br />
9<img id="image1" src="/images/911GT2_1.jpg" alt="" />
10<div id="result"></div>
11
12@section Scripts {
13    <script type="text/javascript">
14        //<![CDATA[
15        let myImage, uploadButton, myCanvas, resultDiv;
16
17        // DOMContentLoaded イベントのリスナ設定
18        window.addEventListener('DOMContentLoaded', () => {
19            uploadButton = document.getElementById("button1");
20            myImage = document.getElementById("image1");
21            resultDiv = document.getElementById("result");
22            myCanvas = document.createElement("canvas");
23
24            uploadButton.addEventListener('click', uploadImage);
25        });
26
27
28        // img id="image1" src="/images/911GT2_1.jpg" の画像を
29        // canvas に描画、canvas の画像データを DataURL 形式で
30        // 取得して JSON 文字列を組み立てて fetch API で送信。
31        async function uploadImage() {
32            const context = myCanvas.getContext('2d');
33            myCanvas.setAttribute('width', myImage.width);
34            myCanvas.setAttribute('height', myImage.height);
35            context.drawImage(myImage, 0, 0);
36            const dataUrl = context.canvas.toDataURL("image/jpeg");
37            const params = {
38                method: "POST",
39                body: '{"imgBase64":"' + dataUrl + '"}',
40                headers: { 'Content-Type': 'application/json' }
41            }
42            const response = await fetch("/api/Canvas", params);
43            if (response.ok) {
44                const message = await response.text();
45                resultDiv.innerText = message
46            } else {
47                resultDiv.innerText = "アップロード失敗";
48            }
49        }
50        //]]>
51    </script>
52}

input id="button1" クリックで、下の Fiddler でのキャプチャ画像の赤枠で示したように、Data url 形式の画像データを取得して組み立てた JSON 文字列が送信されています。

受け取るサーバー側の Web アプリは質問者さんの環境に合わせて自分で考えてください。

参考までに ASP.NET Web API のコードを紹介しておきます。以下の記事の下の方のサンプルコードを見てください。クライアントから JSON 形式で送信されてきた BASE64 形式の画像データをコントローラーで受け取ってデコードしてバイナリ形式に戻してファイルに保存しています。

canvas の画像をアップロード (その 2)
http://surferonwww.info/BlogEngine/post/2022/11/20/upload-image-drawn-on-html5-canvas-2nd.aspx

投稿2023/01/31 02:48

編集2023/01/31 02:50

退会済みユーザー

総合スコア0

alizona

2023/02/01 12:38

ありがとうございます。質問した時のコードでは、サーバーのカメラに接続していたので、その次に使っていたコードに組み込んでみます。ほんとにありがとうございます。（昨日子供が産まれて遅くなりました）

alizona

2023/02/01 14:15

localhostで実行しています。画像を project 直下の media_loca/images ないに保存して、 settings.py の media_rootも MEDIA_ROOT = os.path.join(BASE_DIR, 'media_local') MEDIA_URL='/media/' のようにしました。画像は読み込めているのですが、アップロードに失敗します。

alizona

2023/02/01 14:16

01/Feb/2023 14:15:44] "GET / HTTP/1.1" 200 3440 [01/Feb/2023 14:15:44] "GET /media/images/911GT2_1.jpg HTTP/1.1" 304 0 Not Found: /api/Canvas [01/Feb/2023 14:15:47] "POST /api/Canvas HTTP/1.1" 404 2602

alizona

2023/02/01 14:19

api/Canvas について調べているのですが、どうすればいいかアドバイスいただきたいです。

alizona

2023/02/01 15:08

受け取るdjangoの views.py について調べていたのですが、エラーはフロントで起きてるのだと思っています。

退会済みユーザー

2023/02/01 22:55 編集

上に書いたように、受け取るサーバー側の Web アプリは質問者さんの環境に合わせて自分で考えてください。質問はこのスレッドの本題、 > htmlに表示された画像を post requestで送りたいのですが、どのように画像をhtmlから取得できるのでしょうか？の範囲に限ってください。それに対しては回答済みです。取得して fetch でサーバーに送る例も紹介しました。それが期待していたものと違う (例えば、Data Url 形式でなく Blob 形式で取得したいとか) ということであればその旨書いてもらえれば答えます。

退会済みユーザー

2023/02/02 22:28

質問者さん、その後無言ですが、「画像は読み込めているのですが」とのことですので本題は解決できているのですよね。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。前にも言いましたが無言で放置は NG です。

行動規範の内容に同意します