ASP.NET MVC 5 принимает изображение с холста как файл на контроллер

Question

Я сделал веб-приложение MVC 5 с использованием ASP.NET, где пользователь делает снимок с помощью веб-камеры, изображение предварительно просматривается на холсте.

После нажатия кнопки отправки изображение, снятое с камеры, должно бытьотправлено на контроллер для запуска через механизм распознавания текста Tesseract.

прямо сейчас у меня так, что пользователь выбирает файл с компьютера и нажимает кнопку отправки, отправляя этот файл в метод контроллера для отправки

Как мне обойти метод выбора файла, чтобы просто напрямую отправить любое изображение, которое находится на холсте, в контроллер, когда пользователь нажмет кнопку отправки.

IПрочитайте некоторые посты здесь и попробуйте функцию toBlob на моем холсте, и мне удалось получить dataUrl для моего изображения и установить его на <input type='file>, он обновляет источник тега ввода, но когда я отправляю идентификатор ввода вконтроллер возвращается null

Просмотр:

<div id="work">
<div class="booth">
    <video id="video" width="1000" height="1000"></video>
    <a href="#" id="capture" class="booth-capture-button">Take Photo</a> <br>
</div>

<div id="side">

    @using (Html.BeginForm("Submit", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {

        @Html.AntiForgeryToken()

        <div class="form-group">
            <canvas id="canvas" width="400" height="300"></canvas>
            <label for="imageFile">File:</label>
            <input class="form-control" type="file" name="file" accept="image/*" capture="camera" />
            <input type="file" name="filePush" class="" id="please" />
            <span class="help-block">The file to be processed.</span>
        </div>

        <input type="submit" id="img-to-txt" name="Submit" value="Submit" />
    }
</div>

Контроллер :( после gettiПолучив файл из представления, я получаю входной поток и запускаю на нем Tesseract

 public ActionResult Submit(HttpPostedFileBase filePush)
        {
            if (filePush == null) {
                ViewBag.Result = "There is nothing in me :(";
                return View("Index");

            } else if(filePush.ContentLength == 0)
            {
                ViewBag.ShowResult = true;
                ViewBag.Result = "File not found";
                return View("Index");
            }
            using (var engine = new TesseractEngine(Server.MapPath("~"), "eng", EngineMode.Default))
            {
                // have to load Pix via a bitmap since Pix doesn't support loading a stream.
                using (var image = new System.Drawing.Bitmap(filePush.InputStream))
                {
        // my other code to manipulate the image
}
}

Javascript: (я создал пользовательский файл для чтения с камеры, отобразил холст и заполнил входной файл srcфайл изображения холста

document.getElementById('capture').addEventListener('click', function () {
 context.drawImage(video, 0, 0, 1000, 1000);
 var dataURL = canvas.toDataURL("image/png");
 console.log(dataURL, "first URL");

 canvas.toBlob(function (blob) {
  var newImg = document.createElement('img'),
  url = URL.createObjectURL(blob);
  console.log(url, "Second url");
  document.getElementById('please').src = url;

       // This is what I tried so far
            var fd = new FormData();
            var xhr = new XMLHttpRequest();

            fd.append('file', blob);
            xhr.open('POST', '/endpoint', true);
            xhr.send(fd);

            xhr.onerror = function () {
                console.log('error');
            }

            xhr.onload = function () {
                console.log('success')
            }
            newImg.onload = function () {
            // no longer need to read the blob so it's revoked
            URL.revokeObjectURL(url);
        };

            newImg.src = url;
            console.log(newImg, "made it here");

            var test = document.getElementById("please");
            console.log(test);
            document.body.appendChild(newImg);


    });

});

Я попробовал метод запроса XMLHTTP, но он выдал ошибку 404 not found

Другие примеры использовали PHP, но я его не использую.Я видел несколько примеров на AJAX, но я довольно новичок в этом, поэтому я не совсем понял объяснение.

Буду признателен за любую помощь.