Webカメラで撮影した画像をサーバー上の指定のディレクトリに保存する

Question

前提・実現したいこと

●前提
・webアプリケーションを作っています

●実現したいこと
①ブラウザ上でwebカメラを起動
②撮影ボタンを押すとwebカメラの画像がcanvasに格納
③アップロードボタンを押すと、サーバー上の指定のディレクトリに画像ファイルを保存

発生している問題・エラーメッセージ

①、②はできましたが、③のやり方が分かりません。

試したこと

・javascriptでcanvasを画像ファイルに変換（toDataURLを使った）
これ以降どのように保存をしていいか色々調べてもピンときません。
画像ファイルに本当に変換できているのかもわかりません。

###現在のコード

<div class="picturePreview">
                    <div id="videoPreview"></div>
                    <div id="canvasPreview"></div>
                    <form>
                        <button type="button" id="shutter" class="video-preview-btn" onclick="Snap();">撮影</button>
                    </form>
                    <form>
                        <button type="button" id="save-picture" class="video-preview-btn" onclick="Save();">保存</button>
                    </form>
                </div>

    const cameraSize = { w: 600, h: 400 };
    const resolution = { w: 1080, h: 720 };
    let video;
    let media;
    
    // video要素をつくる
    video          = document.createElement('video');
    video.id       = 'video';
    video.width    = cameraSize.w;
    video.height   = cameraSize.h;
    video.autoplay = true;
    document.getElementById('videoPreview').appendChild(video);
    
    // video要素にWebカメラの映像を表示させる
    media = navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
            width: { ideal: resolution.w },
            height: { ideal: resolution.h }
        }
    }).then(function(stream) {
      video.srcObject = stream;
    }).catch(function (error) {
        console.error('mediaDevice.getUserMedia() error:', error);
        return;
    });
}

function Snap(){

    const canvasSize = { w: 600, h: 400 };
    let canvas;
    let canvasCtx;
    var retake;
    
    // canvas要素をつくる
    canvas        = document.createElement('canvas');
    canvas.id     = 'canvas';
    canvas.width  = canvasSize.w;
    canvas.height = canvasSize.h;
    document.getElementById('canvasPreview').appendChild(canvas);

    // コンテキストを取得する
    canvasCtx = canvas.getContext('2d');

    canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);

    const tracks = document.getElementById('video').srcObject.getTracks();
    tracks.forEach(track => {
        track.stop();
    });

}

function Save(){

    const picture = canvas.toDataURL("image/png");

    //色々調べてここで止まっています。

①pictureをサーバー側に送信する方法が分かりません。

補足情報（FW/ツールのバージョンなど）

フロント：HTML,CSS,JavaScript,jQuery
サーバー：C#
DB：SQL Server

説明不足な部分が多々あるかと思いますが、そういった部分も含めてご指摘いただけると嬉しいです。
宜しくお願いします。

Comments

[dodox86]

> ・javascriptでcanvasを画像ファイルに変換（toDataURLを使った）
> これ以降どのように保存をしていいか色々調べてもピンときません。

画像ファイルをローカルにいったん保存するのは難しいはずだから、toDataURLで生成したデータをもとにPOSTメソッドのHTTPリクエストを自力で構築してサーバーに送信すればできるのではないでしょうか。サーバーはそのHTTPリクエストのコンテントボディを取り出して保存する。

https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL

ただ、現状のコードを載せた方が回答は付きやすいと思います。今のままじゃほぼ丸投げです。

[dodox86]

(ちなみにご質問に低評価を入れたのは私ではありません。が、気持ちは分かります）

[退会済みユーザー]

あなたには前のスレッドの質問へのコメント欄で以下のようにお願いして、次回はちゃんとやりますということだったはずですけど。

いろいろ意味不明ですが、とりあえず以下の追加情報を質問を編集して追記してください。

(2) 何を作っているか書いてください。ASP.NET Web Forms? MVC? Razor Pages? Web API? その他？

(3) 開発環境を書いてください。OS, Visual Studio, SQL Server のバージョン、.NET Framework or Core のどっちかとそのバージョンなど。

(5) これ https://teratail.com/help/question-tips を読んで質問内容を見直してください。

[g45.07]

dodox86さんありがとうございます。
ソースコードをとりあえず載せてみましたが、これでよろしいのでしょうか？

SurferOnWwwさん
(2)についてどのように判別すればいいかわからないのですが、webアプリケーションではダメなのでしょうか？右も左も分からず、調べてみても分からないのでもう少し分かりやすく説明していただけると有難いです。よろしくお願いします。

[退会済みユーザー]

Web アプリと言っても色々あるのは分かりますよね。そのいろいろの内であなたが作っているのは何かと聞いているのですが、「①、②はできましたが」ということなら、それさえも分からないということはないでしょう。前にも言いましたけど釣りを疑うレベルなんですけど。

[g45.07]

分からないから聞いているのですが・・・
レベルの低い人に話を合わせられない、「このように調べて下さい」などの解決方法を提示できないのであれば、コメントをするのをやめていただけないでしょうか。お互い時間の無駄でしょう。
そして、いちいちコメントが不快です。
あなたのような不快なコメントしかできない人を釣ってもこちらには何のメリットもありません。

[退会済みユーザー]

https://teratail.com/help#about-teratail ←"teratailは技術に興味のある人達が集まって、質問と回答を通してお互いに知識や情報を交換・共有する場所です" だそうで、手取り足取り一から十まで教えてもらえる場所ではなさそうです。

ここ https://teratail.com/help/question-tips にも書いてありますが、"人に質問をするには、自分が何を尋ねたいかを知っている必要があります。これは、「自分が今『何がわからないのか』がわかっていて、言語化できている」ということです" というのは分かりませんか？　

あなたの問題を解決しようと回答者はレスしているのだから、逆ギレしてないで真摯に答えることが肝心。できないならやめた方が良いと思う。

[g45.07]

私自身不勉強で、私自身の問題を言語化できていないのはコメントを見ればわかります。１から１０まであなたに教えを乞うつもりもありません。
あなたに言いたいことは、いちいち人を馬鹿にして煽るようなコメントをやめてくださいという一点のみです。人がコミュニケーションを取る場所です。技術屋以前に人としての振る舞いを考えてください。

[退会済みユーザー]

> 人がコミュニケーションを取る場所です。技術屋以前に人としての振る舞いを考えてください。です。技術屋以前に人としての振る舞いを考えてください。

「人としての振る舞い」ですって？　言いましたね。そういう以上はあなたのここでの振る舞いが「人としての振る舞い」だと思っているということかな？　片腹痛い感じですけど、とりあえずそれは置いといて、あなたの質問やレスはコミュニケーションが取れてないことを認識すべき。

[退会済みユーザー]

ところで、回答したけどそれは読んだのか？　上のあなたのレスを見ると何も分からなかったのかな？

[退会済みユーザー]

回答を読んでないか何も分からなかったのかな？　「人の振る舞い」とか言う前にそういうところを何とかしよう。「人がコミュニケーションを取る場所」だって？　何を言っているのかな？

[退会済みユーザー]

おーい、返事してくれ

[BluOxy]

サーバ側が何で作られているのか（ASP.NET Web Forms なのか MVC なのか Razor Pages なのか Web API なのか）によって下記の実装方法が変わっていきます。
・サーバへリクエストする処理（とはいえリクエストURLぐらいしか変わらなさそうですが）
・クライアントからのリクエストや送信された画像を受け取る処理

なので、この情報（サーバ側が何で作られているのか）がないと恐らく具体的な回答はもらえないと思います。

[g45.07]

BluOxyさんコメントありがとうございます。
おそらくASP.NETだと思います。自分が現在作っているものがどれに当てはまるのかどのように判断すればいいのでしょうか。ネット等で調べてみてもよく分かりません。
ちなみにサーバー側ではSQL Serverからデータをとって多少整形してjavascriptに値を返すという処理しか行っておらず、フォーム等は作っていません。
初歩的なことかもしれませんが、ご教授いただけると幸いです。

Answer 1

C#、ASP.NETでの正当な方法はSurferOnWwwさんが回答してくださっているので、HTTPの仕組みを理解していれば特に難しいことではないということを示す、別の方法で実証してみた回答です。

ここではHTMLでカメラで撮影した画像云々はあまり関係無く、Canvas上の画像をサーバーに送ってそのデータをどう処理してファイルとしてサーバー上に保存するのか、ということが主題だと思うので、必要な部分のみ示します。ご提示のコードをもとにカメラで撮影した画像をCanvas上に表示し、送信することはできていたのですが、撮影のタイミングが一致しないなど少なくともこちらで試す限りでは不具合がありましたので、割愛させてもらいます。

まず、HTMLのCanvas上に画像を表示し、下記コード中のdoSubmit()関数でCanvasのtoDataURLで得たデータをPOSTメソッドで送信するコードです。

先頭行には識別用のデータがあるので、それを除去したかたちでBASE64でエンコードされた画像データ部をXMLHttpRequestを使い、サーバーにHTTPリクエストで送信します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>test1</title>
</head>
<body>
    <div>
        <canvas id="canvas1" width="160" height="160" />
    </div>
    <div>
        <form>
            <button type="button" id="button1" onclick="doSubmit();">Submit!</button>
        </form>
    </div>

    <script>

    window.onload = () => {
        const canvas = document.getElementById("canvas1");
        const ctx = canvas.getContext("2d");

        // 画像読み込み
        const image = new Image();
        image.src = "./Lenna.jpg";
        image.onload = () => {
            ctx.drawImage(image, 0, 0);
        };
    };

function doSubmit(){

    const picture = canvas1.toDataURL("image/png");

    console.log('length:' + picture.length);

    // 先頭の "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA"...な文字列中から必要なデータを抽出
    let seplAt = picture.indexOf(",");
    // 先頭のメタ情報を取得
    let meta = picture.substring(0, seplAt);
    console.log("meta=" + meta);

    let contentType = meta.substring(meta.indexOf(":") + 1);
    console.log("contentType=" + contentType);

    // コンテントボディ部相当を取得
    let contentBody = picture.substring(seplAt + 1, picture.length);
    console.log("contentBody.length=" + contentBody.length);

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (this.readyState != 4) {
            console.log('readyState=' + this.readyState);
            return;
        }

        if (this.status == 200) {
            // HTTPサーバーからHTTPステータス200(OK)が返った
            alert('HTTP status: OK');
        }
    }

     xhr.open("POST", 'http://localhost:8000/cgi-bin/t1.cgi', true);
     xhr.setRequestHeader('Content-Type', 'text/plain');
//NG     xhr.setRequestHeader('Content-Transfer-Encoding', 'base64');

     // コンテントボディ部を送信
     xhr.send(contentBody);
}
    </script>
</body>
</html>

http://localhost:8000/cgi-bin/t1.cgi で実行されるサーバー側のプログラムが以下のPython3スクリプトです。
CGIと言う現役ではあるもののWEBアプリとしては古代技術ｗの部類です。簡単であることを示すため、Python3のcgiモジュールなどは使わずベタに処理します。t1.htmlがあるディレクトリ上に、image.png という名前のPNG画像ファイルを保存します。

#!/usr/bin/python3
# t1.cgi

import sys
import os
import base64

# POSTメソッドなので、CONTENT_LENGTH環境変数の値を取得
content_length = os.environ['CONTENT_LENGTH'];

# POSTのコンテントボディ部を標準入力から取得
source = sys.stdin.read(content_length)

# バイナリ列にエンコードして参考データとしてファイルに保存しておく。
data = source.encode()
with open('./image.txt', 'wb') as f:
    f.write(data)

# BASE64からデコードして画像ファイルとして保存。
bindata = base64.b64decode(data)
with open('./image.png', 'wb') as f:
    f.write(bindata)

print("Content-Type: text/plain")
print()
print("OK")

で、これを実行できるようにします。

$ find ./ -type f
./cgi-bin/t1.cgi
./Lenna.jpg
./t1.html

$ python3 -m http.server --cgi
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

ブラウザ上で実行している様子です。

http://localhost:8000/t1.html にアクセスし、Canvas上に画像が表示されていることを確認した上で「Submit!」ボタンを押すと、サーバー側ではimage.pngと言う名前のPNGファイルを保存します。クライアント側からはtoDataURLで得たBASE64エンコードの画像データをPOSTメソッドのコンテントボディ部に収めて送信し、サーバー側ではコンテントボディ部を取り出してBASE64からデコードし、画像ファイルとして保存する、という流れです。

HTTPについておおむね理解すれば、技術要素として何を調べていけば実現できるかということが分かるのだと思います。それをベースに、C#、ASP.NET、PHP、Java、Javaサーブレットなどプログラミング言語やフレームワークを選び、使います。

Comments

[dodox86]

回答本文中に書き洩らしましたが、送信するデータの形式（ここではPOSTメソッドのコンテントボディ部がPNGファイルのBASE64エンコード）をクライアント側、サーバー側で認識合わせをしておく必要があるので、製品レベルではそういったことも意識してインターフェース仕様を決めることが必要です。

[g45.07]

回答ありがとうございます。
解決しました。
HTTPについてしっかり勉強してみたいと思います。

Answer 2

③アップロードボタンを押すと、サーバー上の指定のディレクトリに画像ファイルを保存

「①、②はできましたが」ということなのでブラウザ上の canvas に静止画像を表示するところまではできており、canvas に表示された画像データを取得してアップロードしたいということと理解してレスします。

以下の記事が参考になりませんか？

canvas の画像をアップロード
http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx

上の記事のサンプルコードの中の uploadImage メソッドを見てください。ボタンクリックでこのメソッドが呼び出されると、canvas の画像データを toDataURL メソッドを使って Data URL 形式の文字列として取得し、jQuery.Ajax を使って JSON 形式で Web サーバーに送信しています。

Web アプリが何だか分からないのですが、JSON 形式で受け取って、その中の Data URL 形式の文字列を元の画像データのバイト配列に変換し、ファイル保存することができるなら何だって OK と思います。

上の記事のサンプルコードの中の ReceiveImage メソッドは、ASP.NET Web Forms アプリで Web サービスのメソッドを使って受け取って保存する例です。