如何将预览图像的位图发送到控制器？

Question

我正在开发一个项目，用户需要将图片上传到ASP.NET MVC Core Web应用程序。当前，当用户选择图片时，他会获得预览以查看他/她已上传的图片。

现在在两张图片上，我需要进行车牌识别（我已经在控制器中有了用于识别的代码，所以我只需要控制器中图像的位图即可。

这是我到目前为止的代码：

当前的HTML / JavaScript代码

当用户按下“检查图片”按钮时，应用程序需要验证“所选”图片中是否有特定的印版。如果只是选择图像而不将其上传到服务器，是否可以获得比特流？ 我可以显示图像的事实告诉我是，还是我错了？

如果是这样，如何在控制器中获取图片的位图？ 我还添加了我的MVC项目架构的图片，以更好地理解：

项目体系结构

谢谢。

Answer 1

假设您输入的文件类型为

<input type="file" onchange="encodeImageFileAsURL(this)" />

和onchange函数内部（将其添加到现有的onchange函数中）

function encodeImageFileAsURL(element) {
     var file = element.files[0];
     var reader = new FileReader();
    reader.onloadend = function() {
    console.log('RESULT', reader.result)
    sendBase64(reader.result);
   }
   reader.readAsDataURL(file);

}

然后使用此功能，您可以将图像作为base64发送到控制器

  function sendBase64(base64){
  var formdata = new FormData();
  formdata.append("base64image", base64);

  $.ajax({
      url: "@Url.Action("SaveImage")",
     type: "POST",
    data: formdata,
     processData: false,
    contentType: false
   });
 }

控制器方法：

    [HttpPost]
    public void SaveImage(string base64image)
    {

      Bitmap bmp = Base64ToBitmap(base64image);
     //do something with bitmap

    }

    public Bitmap Base64ToBitmap(String base64String)
    {
    byte[] imageAsBytes = Base64.Decode(base64String, Base64Flags.Default);
    return BitmapFactory.DecodeByteArray(imageAsBytes, 0, imageAsBytes.Length);
    }