-1

ユーザーがウェブカメラを使用して写真を撮れるようにし、その写真をサーバーに保存することを提案したいと思います。

aspx でテスト ページを作成して写真を撮り、ローカル フォルダーに保存しましたが、問題が発生しました。

これまでのところ:
- ウェブカメラがビデオを取得<video>し、ページ内のタグに表示しています。
- ユーザーがビデオ ストリームから写真を撮り、それ<canvas>がページ内のタグに表示されます。

ただし、キャンバス内の画像をローカル フォルダー内のファイルに保存することはできません。保存ボタンをクリックしても何も起こりません。私は何を間違っていますか？

<head runat="server">
<title></title>
<script src="script.js"></script>
<link href="Style.css" rel="stylesheet" />

</head>
<body style="text-align:center">

<video id="video" width="320" height="240" autoplay></video>

<button id="btnStart">Film</button>
<button id="btnPhoto">Take a picture</button>

<canvas id="canvas" width="320" height="240"></canvas>

<br />
<br />
<br />
<br />

<button onclick="javascript:UploadPic();return false;">Save</button>

</body>

ここに私のJavaScriptコードがあります:

    window.onload = function () {

    navigator.getUserMedia = (navigator.getUserMedia ||
                              navigator.webkitGetUserMedia ||
                              navigator.mozGetUserMedia ||
                              navigator.msGetUserMedia);  

    //picture
    var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),

    //film area
    video = document.getElementById("video"),

   //buttons
    btnStart = document.getElementById("btnStart"),
    btnPhoto = document.getElementById("btnPhoto"),

    //video and audio
    videoObj = {
        video: true,
        audio: false
    };

    //begin film
    btnStart.addEventListener("click", function () {
        var localMediaStream;

        if (navigator.getUserMedia) {
            navigator.getUserMedia(videoObj, function (stream) {
                video.src = (navigator.webkitGetUserMedia) ? window.webkitURL.createObjectURL(stream) : stream;
                localMediaStream = stream;

                if (navigator.mozGetUserMedia) {
                    video.mozSrcObject = stream;
                }

            },
            function (error) {
                console.error("Video capture error: ", error.code);
            });

            //capture image button
            btnPhoto.addEventListener("click", function () {
                context.drawImage(video, 0, 0, 320, 240);

            });

        }
    });
};

//Upload da imagem
function UploadPic() {

    //Converte a imagem em base64
    var Pic = document.getElementById("canvas2").toDataURL("image/jpg");
    Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

    //Envia a imagem em base64 para o server (pasta local)
    $.ajax({
        type: 'POST',
        url: 'Save_Picture.aspx/UploadPic',
        data: '{ "imageData" : "' + Pic + '" }',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            alert("Done, Picture Uploaded.");
        }
    });
}
4

1 に答える 1