JQuery WebCam 网页拍照配置 保存服务端
2015-05-10 12:13
471 查看
网页头部引入
初始化摄像头
调用webcam.capture();进行拍照
服务器端解析
<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; } }
相关文章推荐
- jQuery切换网页皮肤并保存到Cookie示例代码
- jquery.webcam进行摄像头拍照
- C#源码刷新网页 最小化托盘http get和post请求配置保存版权时间限制定时调用 单实例运行,如果已经运行则激活窗口到最前显示
- jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
- jQuery切换网页皮肤并保存到Cookie示例代码
- 能够正常使用的,经过测试的java+jquery+webcam调用本地摄像头拍照,然后将拍照结果上传数据库blob字段功能的实现(二)
- 微信公众号网页开发js配置服务端签名
- jQuery切换网页皮肤并保存到Cookie示例代码
- jquery webcam + java服务拍照上传实例
- java+flash在线拍照和编辑,保存到服务器(Spring3.2.2+swf+jquery)
- jquery 网页截屏保存图片
- 【锋利的JQuery-学习笔记】切换网页皮肤-且保存于Cookie
- jQuery提交JSON文件至php网页,保存为文档文件
- java opencv 调用摄像头实现拍照及本地保存 支持上传FTP 路径配置
- jQuery切换网页皮肤保存到Cookie实例
- C#实现将网页保存成图片的网页拍照功能
- jquery网页层拖动实例,保存可以自己实现
- 手把手教你:Ubuntu+django+apache下配置网页错误OperationalError: Unable to Open Database File 的解决方法
- jQuery判断网页中的id是否有重复的
- wsHttpBinding 客户端和服务端配置文件