質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

OpenCV

OpenCV(オープンソースコンピュータービジョン)は、1999年にインテルが開発・公開したオープンソースのコンピュータビジョン向けのクロスプラットフォームライブラリです。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

1回答

1319閲覧

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

alizona

総合スコア126

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

OpenCV

OpenCV(オープンソースコンピュータービジョン)は、1999年にインテルが開発・公開したオープンソースのコンピュータビジョン向けのクロスプラットフォームライブラリです。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

0グッド

0クリップ

投稿2023/01/30 15:15

編集2023/02/11 11:08

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

htmlに表示された画像を post requestで送りたいのですが、どのように画像をhtmlから取得できるのでしょうか?
イメージ説明

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 引用サイト。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答1

0

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 です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問