最近开始研究Html5,感觉功能很强大，下面做个实现拍照上传功能的例子。
一.视图：注意，在不同的浏览器有不同的navigator格式，其他类型浏览器的格式大家可以直接网上找到，这里就不列举了
<!DOCTYPE html>
<html>
<head>
<title></ title>
</head>
<body>
<script src="@ Url.Content("~/Scripts/jquery-1.4..min.js")" type="text/javascript"></script>
<video id="myVideo" autoplay="autoplay"></video >
<br />
<input type="button" value="拍照" />
<br />
拍照结果：
<div id="result">
</div>
<script type="text/javascript"> $(document).ready(init);
var video_element = document.getElementById('myVideo');
function init() { //Google Chrome要用webkitGetUserMedia函式
navigator.webkitGetUserMedia({ video: true }, success); //显示影像 //定义button点选后要做什么
$( "input[type='button']").click(function () {
shoot(); //执行拍照
});
}
function success(stream) {
video_element.src =stream;
$( "#myVideo").attr("src" , window.webkitURL.createObjectURL(stream));
}
//执行拍照
function shoot() { var video = $("#myVideo" )[];
var canvas = capture(video); $( "#result").empty();
$( "#result").append(canvas); //呈现图像(拍照结果)
var imgData = canvas.toDataURL("image/jpg" );
var base64String = imgData.substr(); //取得base64字符串 //上传，储存图片
$.ajax({
url: '@ Url.Action("ApplyForApp", "Handler", new { Area = "PhotoUpload" }) ',
type: "post",
data: { data: base64String },
async: true,
success: function (htmlVal) {
alert( "另存图片成功！" );
}, error: function (e) {
alert(e.responseText); //alert错误讯息
alert( "程序出错！" );
} });
} //从video元素抓取图像到canvas
function capture(video) { var canvas = document.createElement('canvas' ); //建立canvas js DOM元素
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d' );
ctx.drawImage(video, , );
return canvas;
}
</script>
</body>
</html>
二.控制器：
public string ApplyForApp(string data, int affairsid)
{
var UserName = HttpContext.User.Identity.Name.Split(',')[];
AffairsDataRepository rep = new AffairsDataRepository();
AffairsDataModel affairsdata = new AffairsDataModel();
//HttpContext context = null;
//context.Response.ContentType = "text/plain";
string base64String = data;//context.Request["data"];
Image img = this.Base64ToImage(base64String);
var name = DateTime.Now.ToString("yyyyMMddhhmmss")+".jpg";
img.Save(@"D:\VS2010\Myproject\Project\最新\ComPublishWeb\ComPublishWeb\PhotoUpload\" + name);//储存图片
affairsdata.Dataname = name;
affairsdata.Url = "D:\\VS2010\\Myproject\\Project\\最新\\ComPublishWeb\\ComPublishWeb\\PhotoUpload\\" + name;
affairsdata.Uploadtime = DateTime.Now.ToString();
affairsdata.Uploadernum = UserName;
affairsdata.AffairsID = affairsid;
rep.SavePhotoUpload(affairsdata);
return "上传成功！";
} //把base64字符串转成Image对象
public Image Base64ToImage(string base64String)
{
// Convert Base64 String to byte[]
byte[] imageBytes = Convert.FromBase64String(base64String);
MemoryStream ms = new MemoryStream(imageBytes, ,
imageBytes.Length); // Convert byte[] to Image
ms.Write(imageBytes, , imageBytes.Length);
Image image = Image.FromStream(ms, true);
return image;
}
三.Models:
public void SavePhotoUpload(AffairsDataModel data)
{
AffairsMSLinqDataContext db = new AffairsMSLinqDataContext();
AffairsData affairsdata = new AffairsData();
affairsdata.dataname = data.Dataname;
affairsdata.url = data.Url;
affairsdata.uploadernum = data.Uploadernum;
affairsdata.uploadtime = DateTime.Parse(data.Uploadtime);
affairsdata.affairsID = data.AffairsID;
db.AffairsData.InsertOnSubmit(affairsdata);
db.SubmitChanges();
return;
}
大致的过程就是这样了，如果有什么不懂得，欢迎交流。