您的位置:首页 > Web前端 > JQuery

JQuery WebCam 网页拍照配置 保存服务端

2015-05-10 12:13 471 查看
网页头部引入 

  

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









调用webcam.capture();进行拍照
<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; }
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息