javascript - 在 C#/ASP.NET/Razor html Web 应用程序中实现 WebcamJS

Question

我对 C#/Asp.net/Razor HTML 的经验很少。我正在尝试将网络应用程序上的网络摄像头功能从使用旧的 jQuery 网络摄像头（带 Flash）项目更改为 jhuckaby/webcamjs（在 Github 上）项目。我认为现在的问题是 base64 图像保存不正确。我在下面的代码中看到了一些关于 String_To_Bytes2 的内容。这到底是做什么的，您对我如何调整它以从 JavaScript 端获取输入的 base64 图像数据保存在目录文件夹中是否有任何想法？

C＃：

public ActionResult Capture(int id)
{
    var uniqueFileName = id + ".png";
    var uploads = Path.Combine(hostingEnvironment.WebRootPath, "images/photos/");
    var path = Path.Combine(uploads, uniqueFileName);

    var stream = Request.Body;
    string dump;

    using (var reader = new StreamReader(stream))
        dump = reader.ReadToEnd();

    if (System.IO.File.Exists(path))
    {
        System.IO.File.Delete(path);
        System.IO.File.WriteAllBytes(path, String_To_Bytes2(dump));
    }
    else System.IO.File.WriteAllBytes(path, String_To_Bytes2(dump));

    return RedirectToAction("ServiceHistory", new { Id = id });
}

private byte[] String_To_Bytes2(string strInput)
{
    int numBytes = (strInput.Length) / 2;
    byte[] bytes = new byte[numBytes];

    for (int x = 0; x < numBytes; ++x)
    {
        bytes[x] = Convert.ToByte(strInput.Substring(x * 2, 2), 16);
    }
    return bytes;
}

JavaScript（带有一点 Razor HTML）

 <script>
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            //enable_flash: false,
            jpeg_quality: 80
        });
        Webcam.attach('#Camera');
    </script>


    <script>
        function configure() {
            Webcam.set({
                width: 320,
                height: 240,
                image_format: 'jpeg',
                //enable_flash: false,
                jpeg_quality: 80
            });
            Webcam.attach('#Camera');
        }


        // preload shutter audio clip
        var shutter = new Audio();
        shutter.autoplay = false;
        shutter.src = navigator.userAgent.match(/Firefox/) ? '@Url.Content("~/shutter.ogg")' : '@Url.Content("~/shutter.mp3")';

        function take_snapshot() {
            // play sound effect
            shutter.play();

            // take snapshot and get image data
            Webcam.snap(function (data_uri) {
                // display results in page
                document.querySelector('#Camera').innerHTML =
                    '<img id="imageprev" src="' + data_uri + '"/>';
            });
            //Webcam.reset();
        }

        function saveSnap() {
            // Get base64 value from <img id='imageprev'> source
            var base64image = document.getElementById("imageprev").src;

            Webcam.upload(base64image, '@Url.Action("Capture", "Guest", new { Id = @Model.Id })', function (code, text) {
                console.log('Save successfully');
                console.log('The server responded with a' +' '+ code);
               // document.querySelector('#save-btn').style.border = "4px solid green";

                configure();
            });
        }   

    </script>

任何想法或解释将不胜感激。我是一个菜鸟，我觉得我离让它工作很近了。到目前为止，我已经测试过了，我可以使用 console.log 将 base64 图像数据发送到控制台，它确实会生成图像。它还在文件夹目录中保存了一个 PNG 文件，但它是 0kb，所以我认为 C# 方面有些不对劲。

再一次，任何帮助都将是惊人的！如果您需要更多信息，请与我们联系。

标签： javascriptc#asp.net-mvcrazorwebcam.js