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

如何解决在 C#/ASP.NET/Razor html web 应用程序中实现 WebcamJS

我对 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,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# 方面有些不对劲。

同样，任何帮助都会很棒！如果您需要更多信息，请告诉我。