it-roy-ru.com

Отправьте изображение Base64 на контроллер Mvc

Рассмотрим это base64 кодировать изображение

<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 /> 

Я хотел бы опубликовать этот src на контроллере Mvc, но получить ноль, когда post с ajax здесь - это метод post.

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

    }

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

 enter image description here

Полный HTML-код

<!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
TAHA SULTAN TEMURI

Я не уверен на 100%, каковы ваши конечные цели. Но приведенный ниже ответ объясняет, как вы можете отправить исходную строку изображения base64 на сервер и сохранить ее. Я проверил ее с помощью строки base64, сгенерированной из маленькое изображение (размер 22 КБ) и это сработало.

При вызове ajax вы должны отправлять созданный вами объект FormData, а не значение переменной file. Также убедитесь, что вы используете свойства processData и contentType при выполнении вызова ajax при отправке объекта FormData.

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

Теперь, так как это базовая 64-я строка изображения, используйте string в качестве типа параметра вашего метода действия. Имя параметра должно совпадать с вашим ключом элемента данных формы (base64Image). Вы можете сгенерировать байтовый массив из строки base64 в вашем методе действия. Также источник изображения начинается с data:image/png;base64,, который необходимо удалить из строки, прежде чем пытаться преобразовать его.

Приведенный ниже метод принимает строку, которую вы отправляете от клиента, и удаляет первые 21 символ и использует результат этого (который теперь является допустимой строкой base 64), а затем создает изображение из этого и сохраняет в каталог Content/Images/ в приложении корень со случайным именем файла.

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

Я не уверен на 100%, что связыватель модели по умолчанию может связывать строку base64 с изображением. Если нет, то, возможно, вы можете создать такой, который сделает это, и добавить его в связыватели моделей в вашей системе, а затем использовать изображение в качестве типа параметра. Код в связывателе модели будет очень похож (прочитайте строку и сгенерируйте из нее изображение)

9
Shyju

Я использую 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