版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qiuhaotc/article/details/45619777
网页头部引入
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.webcam.min.js" type="text/javascript"></script>
初始化摄像头
var pos = 0, ctx = null, saveCB, image = [];
var pos = 0;
var w = 320;
var h = 240;
$(function () {
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
saveCB = function (data) {
var col = data.split(";");
var img = image;
for (var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos += 4;
}
if (pos >= 4 * 320 * 240) {
ctx.putImageData(img, 0, 0);
$.post("UploadImage.ashx", { type: "data", image: canvas.toDataURL("image/png") }, function (msg) {
var msgjson = JSON.parse(msg);
flashcam(msgjson.code, msgjson.picUrl);
});
pos = 0;
}
};
} else {
saveCB = function (data) {
image.push(data);
pos += 4 * 320;
if (pos >= 4 * 320 * 240) {
$.post("UploadImage.ashx", { type: "pixel", image: image.join('|') }, function (msg) {
var msgjson = JSON.parse(msg);
flashcam(msgjson.code, msgjson.picUrl);
});
pos = 0;
}
};
}
<span style="white-space:pre"> </span> //延时加载flash
setTimeout(callFlash, 500);
});
function callFlash() {
$("#Camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "jscam.swf?" + Math.random(),
onTick: function () { },
onSave: saveCB,
onCapture: function () {
webcam.save();
},
debug: function () { },
onLoad: function () { }
});
}
<div id="Camera"></div><div id="avatar_priview" style="width: 320px"></div><input type="button" onclick=" webcam.capture();" value="拍照"/>
服务器端解析
/// <summary>
/// UploadImage 的摘要说明
/// </summary>
public class UploadImage : IHttpHandler
{
#region 静态字段
static JavaScriptSerializer jss = new JavaScriptSerializer();
UpFileResponseModel fail1 = new UpFileResponseModel() { code = -1, msg = "", picUrl = "" };
UpFileResponseModel fail2 = new UpFileResponseModel() { code = -2, msg = "", picUrl = "" };
#endregion
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
var imageStr = context.Request["image"].Replace("data:image/png;base64,", "").Trim();
string fileName = DateTime.Now.Ticks.ToString();
var path = "~/upload/" + fileName;//上传至upload文件夹
Base64StringToImage(path, imageStr);
UpFileResponseModel model = new UpFileResponseModel() { code = 1, msg = "\u6210\u529f", picUrl = "/upload/" + fileName + ".jpg" };
context.Response.Write( jss.Serialize(model));
}
public bool IsReusable
{
get
{
return false;
}
}
private byte[] String_To_Bytes2(string strInput)
{
int numBytes = (strInput.Length) / 2;
byte[] bytes = new byte[numBytes];
for (int x = 0; x < numBytes; ++x)
{
bytes[x] = Convert.ToByte(strInput.Substring(x * 2, 2), 16);
}
return bytes;
}
/// <summary>
/// base64编码的文本 转为 图片
/// </summary>
/// <param name="txtFilePath">文件相对路径</param>
/// <param name="str">图片字符串</param>
private void Base64StringToImage(string txtFilePath, string str)
{
try
{
String inputStr = str;
byte[] arr = Convert.FromBase64String(inputStr);
MemoryStream ms = new MemoryStream(arr);
Bitmap bmp = new Bitmap(ms);
bmp.Save(System.Web.HttpContext.Current.Server.MapPath(txtFilePath) + ".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
//bmp.Save(txtFileName + ".bmp", ImageFormat.Bmp);
//bmp.Save(txtFileName + ".gif", ImageFormat.Gif);
//bmp.Save(txtFileName + ".png", ImageFormat.Png);
ms.Close();
//imgPhoto.ImageUrl = txtFilePath + ".jpg";
//MessageBox.Show("转换成功!");
}
catch (Exception ex)
{
}
}
}}
//上传图片返回模型
public class UpFileResponseModel
{
public int code { get; set; }
public string msg { get; set; }
public string picUrl { get; set; }
}