Как я могу отправить изображение Canvas в виде объекта HttpPostedFilebase? это возможно?

Question

Я пытаюсь отправить изображение с моей веб-камеры непосредственно на контроллер.

<div id="container">
        <video autoplay="true" id="videoElement">
        </video>
        <canvas id="myCanvas" width="400" height="350"></canvas>
        <button onclick="snapshot()">Click</button>
    </div>

Я отправляю это изображение в виде строки base64 на мой контроллер через ajax.

<script>
function snapshot() {
            // Draws current image from the video element into the canvas
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            var imgInfo = canvas.toDataURL("image/png");
            console.log(imgInfo);
            var image = imgInfo; // to create a image read the previous example

            $.ajax({
                url: "@Url.Action("Contact","Home")",
                // send the base64 post parameter
                data: {
                    base64: image
                },
                // important POST method !
                type: "post",
                complete: function () {
                    console.log("Ready");
                }
            });
        }
    </script>

Прямо сейчас Контроллер выглядит как ..

public ActionResult Contact(string base64)
{
   //
}

Возможно ли, чтобы я отправил эту base64 строку как объект HttpPostedFileBase в Контроллер? Нравится ..

public ActionResult Contact(HttpPostedFileBase anyname)
{
   //
}

Answer 1

Поскольку у вас есть строка URI, вы можете создать Blob и отправить ее контроллеру.

<script>
function dataURItoBlob(dataURI) {
  const [metaData, data] = dataURI.split(',');
  const [prefix, mimeSection] = metaData.split(':');
  const [mimeString, separator] = mimeSection.split(';')

  const byteString = atob(data);
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(arrayBuffer);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  return new Blob([arrayBuffer], { type: mimeString });
}

function snapshot() {

  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  var imgInfo = canvas.toDataURL("image/png");
  var blobImage = dataURItoBlob(imgInfo);
  var formData = new FormData();
  formData.append("image", blobImage)

  $.ajax({
   url: "@Url.Action("Contact", "Home")",
   data: formData,
   processData: false,
   contentType: false,
   type: "post",
   complete: function () {
     console.log("Ready");
   }
 });
}
</script>

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

public ActionResult Contact()
{
  var file = Request.Files
    .Cast<string>().Select(key => Request.Files[key])
    .First();
  // Further logic...
}