it-swarm.com.de

Bieten Sie ein Base64-Image an den Mvc-Controller an

Betrachten Sie dieses base64-Codierungsbild

<img src='data:image/Png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABICAYAAABhlHJbAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAAAAEZ0FNQQAAsY8L/GEFAAAACXBIWXMAABVlAAAVZQGF3cVdAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABnNJREFUeF7tnFls3EQYx11ucQshClWbtb1LC4RLIARIHAXxgsQDCOWhJGs7mypIoII4BAIhsYAEWY+TlEo8FAQSQjxAuR54AnFUFHH0CQlEEWcaQhpKmx5poVWb8H3eb92Jd7Nre8a7a2d/0l9txvN99vw1HnvtGSsdqskYzu2ayb4A7dNN9oNm2E8qPW8fT5s71EOznDwYdxQ0x0s12LtXD248kaoFpFg8TisMX6Gb9t264dwHSR5PtEz7Mc10BrE92b6RnKLMLaGWulDPO+w3ryLoje8FMlG37As1094IQX/7k6RJqsl+wdNz2WDxVDXProWyGX8dv+qamFu34WQwbz1UPOIPTLec3+HfndXltQU9+P0qE1Vr9GzY+K2/MugACAfUd8q9Mslir4M+BMO+oXb52xpYaOLq1cUTyLziKVCIJvGVtmYMdlf4gTMZ4NkGpjq+NoeTwZ51k8EA+zS/AcaG5z13U0o2zy6FtoqO8ZNKpm/0AvgP350Z7SO1kHlTXJujalqB3vZApQCvSti1aT+pJGcOdUNbZZiHegtP308qBXCJfoL2k0q6+p1LYNzbwRkgoumca /> 

Ich möchte diese src auf Mvc-Controller posten, aber wenn ich mit ajax poste, wird hier die post-Methode angezeigt.

    var file = document.getElementById("base64image").src;

        var formdata = new FormData();
        formdata.append("base64image", file);

        $.ajax({
            url: "http://localhost:26792/home/SaveImage",
            type: "POST",
            data: file



        });

Mvc Controller

    [HttpPost]

    public void SaveImage(Image file)
    {

    }

Ich denke, dass der von mir verwendete Datentyp dafür nicht gültig ist. Bitte schlagen Sie mir vor, was ich hier tun kann.

 enter image description here

Vollständiger HTML-Code

<!doctype html>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS Test Page</title>
<style type="text/css">
    body { font-family: Helvetica, sans-serif; }
    h2, h3 { margin-top:0; }
    form { margin-top: 15px; }
    form > input { margin-right: 15px; }
    #results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id="results">Your captured image will appear here...</div>

<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture &amp; display</h3>

<div id="my_camera"></div>

<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="../webcam.min.js"></script>

<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
    Webcam.set({
        width: 320,
        height: 240,
        image_format: 'jpeg',
        jpeg_quality: 90
    });
    Webcam.attach( '#my_camera' );
</script>

<!-- A button for taking snaps -->
<form>
    <input type=button id="takeshot" value="Take Snapshot" onClick="take_snapshot()">
</form>

<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">

    window.onload = function () {

        setInterval(function () { take_snapshot() }, 5000);
    }
    function take_snapshot() {
        // take snapshot and get image data
        Webcam.snap( function(data_uri) {
            // display results in page
            document.getElementById('results').innerHTML = 
                '<h2>Here is your image:</h2>' + 
                '<img id="base64image" src="' + data_uri + '"/>';
        });



        var file = document.getElementById("base64image").src;

        var formdata = new FormData();
        formdata.append("base64image", file);

        $.ajax({
            url: "http://localhost:26792/home/SaveImage",
            type: "POST",
            data: file



        });
        //var ajax = new XMLHttpRequest();
        //ajax.addEventListener("load", function (event) { uploadcomplete(event); }, false);
        //ajax.open("POST", "http://localhost:26792/home/SaveImage");

        //ajax.send(formdata);
    }
    </script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


 </body>
 </html>
6

Ich bin mir nicht 100% ig sicher, was Ihre Endziele sind. Aber die Antwort unten erklärt, wie Sie einen base64-Image-Source-String an den Server senden und speichern können. Ich habe ihn mit einem base64-String getestet, der aus einem kleines Bild (22 KB) und es hat funktioniert.

In Ihrem ajax-Aufruf sollten Sie das von Ihnen erstellte FormData-Objekt senden, nicht den Wert der Variable file. Stellen Sie außerdem sicher, dass Sie die Eigenschaften processData und contentType verwenden, wenn Sie den ajax-Aufruf ausführen, während Sie ein FormData-Objekt senden.

var file = document.getElementById("base64image").src;

var formdata = new FormData();
formdata.append("base64image", file);

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

Da dies die Basis-64-Zeichenfolge des Bildes ist, verwenden Sie string als Parametertyp Ihrer Aktionsmethode. Der Parametername sollte mit Ihrem Formulardatenelementschlüssel (base64Image) übereinstimmen. Sie können ein Byte-Array aus der base64-Zeichenfolge in Ihrer Aktionsmethode generieren. Die Bildquelle beginnt ebenfalls mit data:image/png;base64,, das vor dem Konvertieren aus der Zeichenfolge entfernt werden muss.

Die untenstehende Methode akzeptiert die vom Client gesendete Zeichenfolge, entfernt die ersten 21 Zeichen und verwendet das Ergebnis davon (jetzt eine gültige Basis-64-Zeichenfolge), erstellt daraus ein Bild und speichert es in der App im Verzeichnis Content/Images/ root mit einem zufälligen Dateinamen.

[HttpPost]
public void SaveImage(string base64image)
{
    if (string.IsNullOrEmpty(base64image))
        return;

    var t = base64image.Substring(22);  // remove data:image/png;base64,

    byte[] bytes = Convert.FromBase64String(t);

    Image image;
    using (MemoryStream ms = new MemoryStream(bytes))
    {
        image = Image.FromStream(ms);
    }
    var randomFileName = Guid.NewGuid().ToString().Substring(0, 4) + ".png";
    var fullPath = Path.Combine(Server.MapPath("~/Content/Images/"), randomFileName);
    image.Save(fullPath, System.Drawing.Imaging.ImageFormat.Png);
}

Ich bin nicht zu 100% sicher, dass der Standard-Modellordner die base64-Zeichenfolge an ein Bild binden kann. Wenn nicht, können Sie vielleicht einen erstellen, der das tut, und das zu den Modellbindern in Ihrem System hinzufügen und dann das Image als Parametertyp verwenden. Der Code im Modellordner ist sehr ähnlich (lesen Sie den String und generieren Sie ein Bild).

9
Shyju

Ich verwende HttpPostedFileBase.cs. 

 [HttpPost]
            public ActionResult AddDocument(ReservationDocumentsVM reservationDocumentsVM, HttpPostedFileBase postedFile)
            {
                if (postedFile != null)
                {
                    string path = Server.MapPath("~/Content/Documents/");

                    if (!Directory.Exists(path))
                    {
                        Directory.CreateDirectory(path);
                    }
                    postedFile.SaveAs(path + Path.GetFileName(postedFile.FileName));
                    reservationDocumentsVM.VirtualPath = path + Path.GetFileName(postedFile.FileName);

                    reservationRepository.AddOrUpdateReservationDocuments(reservationDocumentsVM);


                }


   return RedirectToAction("Index", "Reservation");
        }
1
Indrit Kello