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

Question

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

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

image.html

{% block content %}

<p class="border" style="padding:10px;">Use this photo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a class="btn btn-outline-info" href="/send" role="button">Select</a> 
</p>

<p class="border" style="padding:10px;">Take an another photo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a class="btn btn-outline-info" href="{{request.META.HTTP_REFERER}}" role="button">Take an another photo</a> 
</p>


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


{% endblock %}

# ストリーミング画像・映像を表示するview
class IndexView(View):
    def get(self, request):
        return render(request, 'index.html', {})

# ストリーミング画像を定期的に返却するview
def video_feed_view():
    return lambda _: StreamingHttpResponse(generate_frame(), content_type='multipart/x-mixed-replace; boundary=frame')

# # フレーム生成・返却する処理
def generate_frame():
    capture = cv2.VideoCapture(0)  # USBカメラから

    while True:
        if not capture.isOpened():
            print("Capture is not opened.")
            break
        # カメラからフレーム画像を取得
        ret, frame = capture.read()
        if not ret:
            print("Failed to read frame.")
            break
        # フレーム画像バイナリに変換
        ret, jpeg = cv2.imencode('.jpg', frame)
        byte_frame = jpeg.tobytes()
        # フレーム画像のバイナリデータをユーザーに送付する
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + byte_frame + b'\r\n\r\n')
    capture.release()


#一枚の写真を表示するための処理
class ImageView(View):
    def get(self, request):
        return render(request, 'image.html', {})

def image_feed_view():
    return lambda _: HttpResponse(generate_one_frame(), content_type='image/jpeg')

from django.http import HttpResponse
def generate_one_frame():

    capture = cv2.VideoCapture(0) 
    count=0
    while True:
        count=count+1
        if count>=10:
            break

        if not capture.isOpened():
            print("Capture is not opened.")
            break

        # カメラからフレーム画像を取得
        ret, frame = capture.read()
        if not ret:
            print("Failed to read frame.")
            break

        # フレーム画像バイナリに変換
        ret, jpeg = cv2.imencode('.jpg', frame)
        byte_frame = jpeg.tobytes()
        # フレーム画像のバイナリデータをユーザーに送付する

    capture.release()
    return byte_frame

urls.py

from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls.static import static
from django.urls import path
from . import views

urlpatterns = [
    path('', views.IndexView.as_view()),
    path('video_feed', views.video_feed_view(), name="video_feed"),

    path('image',views.ImageView.as_view(), name='image'),
    path('image_feed',views.image_feed_view(), name="image_feed"),
]
urlpatterns += staticfiles_urlpatterns()

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

Comments

[meg_]

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

[alizona]

ありがとうございます。

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

[meg_]

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

[alizona]

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

[alizona]

capture ボタンが押された時点でのフレーム画像を、httpresponseで画面に表示してるだけなので、保存とかはしていないと思うのですが。

そのため、httpresponse で送った jpeg.tobyte() はサーバーのメモリ上に保存されていないと思ったのですが合っていますでしょうか？

[SurferOnWww]

ブラウザ上で質問に書いてあった html の、

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

に画像が表示されている状態から、その画像データを JavaScript で取得してサーバーに送信するという話ですか？

[SurferOnWww]

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

[alizona]

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

[SurferOnWww]

本題の、

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

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

[SurferOnWww]

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

Answer 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 倍大きくなってしまいますが・・・）

@{
    ViewData["Title"] = "UploadImage";
}

<h1>UploadImage</h1>

<input id="button1" type="button" value="Upload" />
<br />
<img id="image1" src="/images/911GT2_1.jpg" alt="" />
<div id="result"></div>

@section Scripts {
    <script type="text/javascript">
        //<![CDATA[
        let myImage, uploadButton, myCanvas, resultDiv;

        // DOMContentLoaded イベントのリスナ設定
        window.addEventListener('DOMContentLoaded', () => {
            uploadButton = document.getElementById("button1");
            myImage = document.getElementById("image1");
            resultDiv = document.getElementById("result");
            myCanvas = document.createElement("canvas");

            uploadButton.addEventListener('click', uploadImage);
        });


        // img id="image1" src="/images/911GT2_1.jpg" の画像を
        // canvas に描画、canvas の画像データを DataURL 形式で
        // 取得して JSON 文字列を組み立てて fetch API で送信。
        async function uploadImage() {
            const context = myCanvas.getContext('2d');
            myCanvas.setAttribute('width', myImage.width);
            myCanvas.setAttribute('height', myImage.height);
            context.drawImage(myImage, 0, 0);
            const dataUrl = context.canvas.toDataURL("image/jpeg");
            const params = {
                method: "POST",
                body: '{"imgBase64":"' + dataUrl + '"}',
                headers: { 'Content-Type': 'application/json' }
            }
            const response = await fetch("/api/Canvas", params);
            if (response.ok) {
                const message = await response.text();
                resultDiv.innerText = message
            } else {
                resultDiv.innerText = "アップロード失敗";
            }
        }
        //]]>
    </script>
}

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

Comments

[alizona]

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

[alizona]

localhostで実行しています。

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

[alizona]

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]

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

[alizona]

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

[SurferOnWww]

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

質問はこのスレッドの本題、

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

の範囲に限ってください。それに対しては回答済みです。取得して fetch でサーバーに送る例も紹介しました。

それが期待していたものと違う (例えば、Data Url 形式でなく Blob 形式で取得したいとか) ということであればその旨書いてもらえれば答えます。

[SurferOnWww]

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