Javascript 将Base64映像发布到Mvc控制器
考虑这个base64编码图像Javascript 将Base64映像发布到Mvc控制器,javascript,c#,asp.net,ajax,asp.net-mvc,Javascript,C#,Asp.net,Ajax,Asp.net Mvc,考虑这个base64编码图像 <img src='data:image/Png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABICAYAAABhlHJbAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAAAAEZ0FNQQAAsY8L/GEFAAAACXBIWXMAABVlAAAVZQGF3cVdAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABnNJREFUeF7tnFls
<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 />
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 & 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>
WebcamJS测试页面
正文{字体系列:Helvetica,无衬线;}
h2,h3{页边距顶部:0;}
表格{页边距顶端:15px;}
表单>输入{右边距:15px;}
#结果{浮点:右;边距:20px;填充:20px;边框:1px实心;背景:#ccc;}
您捕获的图像将显示在此处。。。
WebcamJS测试页面
演示简单的320x240捕获&;显示
网络摄像机({
宽度:320,
身高:240,
图像_格式:“jpeg”,
jpeg_质量:90
});
网络摄像头。连接(“#我的摄像头”);
window.onload=函数(){
setInterval(函数(){take_snapshot()},5000);
}
函数take_snapshot(){
//拍摄快照并获取图像数据
网络摄像头.snap(函数(数据uri){
//在页面中显示结果
document.getElementById('results')。innerHTML=
'这是您的图像:'+
'';
});
var file=document.getElementById(“base64image”).src;
var formdata=new formdata();
追加(“base64image”,文件);
$.ajax({
url:“http://localhost:26792/home/SaveImage",
类型:“POST”,
数据:文件
});
//var ajax=new-XMLHttpRequest();
//addEventListener(“加载”,函数(事件){uploadcomplete(事件);},false);
//打开(“POST”http://localhost:26792/home/SaveImage");
//发送(formdata);
}
我不能100%确定您的最终目标是什么。但下面的答案解释了如何将base64图像源字符串发送到服务器并保存它。我用从a生成的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字符串生成字节数组。图像源也以数据开始: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字符串绑定到图像。如果没有,您也许可以创建一个这样做,并将其添加到系统中的模型绑定器中,然后使用图像作为参数类型。模型绑定器中的代码非常相似(读取字符串并从中生成图像)我使用的是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");
}
首先,这是图像的有效base64字符串吗?你能创建一个JSFIDLE来呈现一个图像吗?@Shyju这是一个有效的图像出于安全原因我刚刚删除了一些字符请帮助。我不想显示真实的图像,我的意思是。src太长,无法在这里写入,所以我使用了短字符example@DumpsterDiver使用字符串作为数据类型怎么样?然后,您可以将base64字符串转换为图像controller@Niladri在这种情况下,什么是reservationDocumentsVM?我没有传递两个参数。抱歉@Shyju它仍然为空,感谢您的关注非常感谢。我实际上在答案中使用了完全相同的代码,并验证了它是否有效。你照原样回答了吗?(客户端和服务器端)您正在ajax POST中调用SaveImage,但操作是SaveImage2?是。那是个打字错误。我会修正的,我是在发送文件而不是表单数据,非常感谢。
[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");
}