Question

我正在尝试从流视频中获取快照，将该快照转换为base64并将其上传到服务器。下面的代码工作时，我绘制图像但不是当我拍下快照时，我的代码请帮助

Html：

    <video id="cam" width="320px" height="240px" autoplay style="display: inline;"></video>
    <canvas width="320" id="canvas" height="240" style="display: inline;"></canvas>
    <button id="snap">Snap Photo</button>
    <button id="capture" onclick="javascript:captureImage();return false;">Capture</button>

使用Javascript：

            var video = document.getElementById("cam");
            var canvas = document.getElementById("canvas");
            var context= canvas.getContext('2d');


            getUserMedia({ "video": true }, function (stream) {
                    var url = createObjectURL(stream);
                    video.src = url;  
                    }, function (error) { alert("error while loading camera"); }
            );

      document.getElementById("snap").addEventListener("click", function() {
                context.drawImage(video, 0, 0, 320, 240);
            });


  function captureimage() {
            var Pic = document.getElementById("canvas").toDataURL("image/png");

            Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");
            $.ajax({
                url: 'Save_Picture.aspx/UploadPic',
                type: 'POST',
                data: '{ "imageData" : "' + Pic + '" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    alert("Done, Picture Uploaded.");
                },
                error: function (jqXHR, status, err) {
                    alert(err.message)
                    alert("Local error callback.");
                }

            });
        }

ASPX：

       public static void UploadPic(string imageData)
    {
        System.IO.File.WriteAllText(@"C:\path.txt", imageData);
        string Pic_Path = HttpContext.Current.Server.MapPath("MyPicture.png");
        using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {
                byte[] data = Convert.FromBase64String(imageData);
                bw.Write(data);
                bw.Close();
            }
        }
    }

Answer 1

问题是图像尺寸改变后的图像尺寸正常

更改自：

    context.drawImage(video, 0, 0, 320, 240);

更改为：

    context.drawImage(video, 0, 0, 200, 150);

使用移动设备从视频拍摄快照并将其上传到服务器html5

1 个答案: