後的Base64形象MVC的控制器

考慮這種使用Base64編碼圖像後的Base64形象MVC的控制器

<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的控制器，但得到空當後使用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控制器

[HttpPost] 

    public void SaveImage(Image file) 
    { 

    }

我想我使用的數據類型是不適用於此請建議我我該怎麼辦這裏。

完整的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>

來源

2017-10-21 DumpsterDiver

首先，這是一個有效的base64字符串的圖像？你可以創建一個jsfiddle渲染圖像？ – Shyju

@Shyju這是一個有效的圖像我剛剛刪除了一些字符出於安全原因請help.I不想顯示我的意思是真實圖像。 – DumpsterDiver

src太長而不能在這裏寫，因此我使用了簡短的示例 – DumpsterDiver

我不是100％確定你的最終目標是在這裏。但下面的答案解釋瞭如何將base64圖像源字符串發送到服務器並將其保存。我使用從small image (22 KB size)生成的base64字符串對其進行了測試，結果很有效。

在你的Ajax調用，你應該向你創建的FormData對象，file變量不是值。同時確保在發送FormData對象時進行ajax調用時使用processData和contentType屬性。現在

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作爲參數類型的操作方法。參數名稱應與您的formdata項目鍵（base64Image）相匹配。您可以在操作方法中從base64字符串生成一個字節數組。此外，圖像源以data:image/png;base64,開頭，在嘗試將其轉換之前，需要將其從字符串中刪除。

以下方法接受您從客戶端發送的字符串，並刪除前21個字符並使用該字符的結果（現在是有效的基本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字符串綁定到圖像。如果沒有，您可以創建一個可以將其添加到系統中的模型活頁夾中，然後使用Image作爲參數類型。模型綁定器中的代碼將非常相似（讀取字符串並從中生成圖像）

來源

2017-10-21 14:21:36 Shyju

對不起@Shyju它仍然無效，謝謝你非常感謝你。 – DumpsterDiver

我實際上在答案中使用完全相同的代碼並驗證它正在工作。你是否按照原樣回答了問題？（客戶端和服務器端） – Shyju

您在ajax POST中調用SaveImage，但操作是SaveImage2？ – DumpsterDiver

我正在使用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"); 
     }

來源

2017-10-21 14:36:58

什麼是reservationDocumentsVM在這種情況下？我沒有通過兩個論點。 – DumpsterDiver

後的Base64形象MVC的控制器

回答

相關問題