How to send a bitmap of a preview image to a controller?

Question

I am developing a project where the user needs to upload pictures to an ASP.NET MVC Core web application. Currently when the user selects a picture, he gets a preview to see which picture he/she has uploaded.

Now on two of the pictures I need to do number plate recognition (I already have code for the recognition in the controller, so I just need the bitmap of the image in my controller.

This is my code thusfar:

Current HTML/Javascript code

When the user presses the "Check pictures" button, the app needs to verify if a certain plate is in the 'selected' picture. Is it possible to get the bitstream if the image is just selected and not uploaded to a server? The fact that I can display the image tells me yes, or am I wrong?

If so, how do I get the bitmap of the picture in my controller? I have also added a picture of my MVC project architecture for better understanding:

Project Architecture

Thanks in advance.

Answer 1

Lets Say You have Input type File

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

and inside onchange function (add this to your existing onchange function)

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);

}

Then using this function you can send image as base64 to controller

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

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

Controller Method:
(Base64ToBitmap code from Yksh's answer here)

    [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);
    }