使用 jquery.webcam 进行asp.net 拍照

HTML 代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="JqueryCamera.index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.webcam.js"></script>
</head>
<body>

    <script type="text/javascript">
        $(document).ready(function () {
            var image = new Array();
            var ctx = null;
            var pos = 0;
            var w = 320;
            var h = 240;
            $("#webcam").webcam({
                width: 320,
                height: 240,
                mode: "callback",
                swffile: "/js/jscam_canvas_only.swf",
                onTick: function (remain) { },
                onSave: function (data) {
                    image.push(data);
                    pos += 4 * w;
                    if (pos == 4 * w * h) {
                        $.post("CamPost.ashx", { w: w, h: h, pix: image.join(‘|‘) }, function (msg) {
                            $("#flash").attr(‘src‘, msg);
                            $("#txt_img_path").val(msg);
                            pos = 0;
                            image = new Array();
                        });
                    }
                },
                onCapture: function () { webcam.save(); },
                onLoad: function () {
                    var x = 0;
                    var cams = webcam.getCameraList();
                    for (var i in cams) {
                        jQuery("#cams").append("设备信息:" + cams[i] + 设备信);
                        x++;
                    }
                    jQuery("#Div1").append("拥有设备数:" + x + "");
              }
            });
        });
    </script>
    <div id="cam" style="width: 320px; height:240px; border: solid 1px #ddd; float:left;">
        <div id="camBox">
            <div id="webcam">
            </div>
        </div>

    </div>

    <div style="width: 320px; height: 240px; border: 1px solid #ddd; float:left;">

        <img id="flash" />        

    </div>
     <div style="clear: both;">
    </div>
      <input type="button" value="拍照" id="btn_pz" name="btn_pz"    onclick="webcam.capture()"/><br />
       <input type="text" id="txt_img_path"   style=" width:320px;"/>
        <div id="cams"></div>
         <div id="Div1"></div>
</body>
</html>

 CamPost.ashx 代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JqueryCamera
{
    /// <summary>
    /// CamPost 的摘要说明
    /// </summary>
    public class CamPost : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string wbepath = "";
            context.Response.ContentType = "text/plain";
             DateTime dt = DateTime.Now;
             string fileName =  dt.ToString("yyyyMMdd_HHmmss", System.Globalization.DateTimeFormatInfo.InvariantInfo) + ".jpg";
            if (context.Request["pix"] != null )
            {
                if (!string.IsNullOrEmpty(context.Request["w"]) && !string.IsNullOrEmpty(context.Request["h"]) && !string.IsNullOrEmpty(context.Request["pix"])) // && !string.IsNullOrEmpty(context.Request["planid"]) && !string.IsNullOrEmpty(context.Request["examkey"]
                {
                    string planid = DateTime.Now.ToString("yyyyMMdd")+  "";
                    string examkey = context.Request["examkey"];
                    string width = context.Request["w"];
                    string height = context.Request["h"];
                    string pix = context.Request["pix"];
                    int w = int.Parse(width);
                    int h = int.Parse(height);
                    string savePath = context.Server.MapPath("~/UpLoad/Cam_Img/" + planid + "/");
                    try
                    {

                        System.Drawing.Bitmap bmap = new System.Drawing.Bitmap(w, h);
                        string[] rows = pix.Split(new char[] { ‘|‘ }, StringSplitOptions.RemoveEmptyEntries);
                        for (int i = 0; i < rows.Length; i++)
                        {
                            string[] col = rows[i].Split(new char[] { ‘;‘ }, StringSplitOptions.RemoveEmptyEntries);
                            for (int j = 0; j < col.Length; j++)
                            {
                                System.Drawing.Color color = System.Drawing.Color.FromArgb(Convert.ToInt32(col[j]));
                                System.Drawing.Color reColor = System.Drawing.Color.FromArgb(255, color);
                                bmap.SetPixel(j, i, reColor);
                            }
                        }
                        System.IO.DirectoryInfo dirPath = new System.IO.DirectoryInfo(savePath);
                        if (!dirPath.Exists)
                        {
                            dirPath.Create();
                        }

                        savePath += fileName;
                        bmap.Save(savePath);
                    }
                    catch (Exception e)
                    {
                    }

                    wbepath = "/UpLoad/Cam_Img/" + planid + "/" + fileName;
                    context.Response.Write(wbepath);
                    context.Response.End();
                }
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

  

 

时间: 2024-10-25 14:49:23

使用 jquery.webcam 进行asp.net 拍照的相关文章

jquery webcam + java服务拍照上传实例

前端关键代码: //自定义样式 <style type="text/css">     #webcam { border: 1px solid #666666; width: 320px; height: 240px; }     #photos { border: 1px solid #666666; width: 320px; height: 240px; }     .btn { width: 320px; height: auto; margin: 5px 0px;

jQuery调用摄像头插件jquery-webcam-plugin拍照

插件网址:https://www.xarg.org/project/jquery-webcam-plugin/ 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"&g

使用jQuery Uploadify在ASP.NET 上传附件 (转)

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.Uploadify官方网址:http://www.uploadify.com/,在MVC中使用的方法可以参考 jQuery Uploadify在ASP.NET MVC3中的使用 和 Asp.net Mvc中使用uploadify实现图片缩放保存. 本文是一个简单的介绍Demo,主要是动态传递参数方法:通过formdata 向处理程序传递额外的表单数据: <!DOCTYPE html PUBLIC "-//W3C

JQuery ajax调用asp.net的webMethod

在vs2010中,用JQuery ajax调用asp.net 2.0的  webMethod 方法时,怎么都调不出来,原来和3.5 有点出入. 3.5中,无需特殊设置,可以直接用$.ajax调用在aspx.cs中,访问级别public,静态的,标记为[webmethod]的方法. aspx.cs: using System.Web.Services; [WebMethod] public static string PollCount() { …… return getResultHTML(ds

JQuery直接调用asp.net后台WebMethod方法

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.[WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的声明后台<C#>: using System.Web.Script.Services; [WebMethod] public static string SayHello() { return "Hello Ajax!"; } 前台<JQuery>: $(funct

jQuery DataTables and ASP.NET MVC Integration

part 1 : http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part Introduction The jQuery DataTables plug-in is an excellent client-side component that can be used to create rich-functional tables in the web brows

利用JQuery直接调用asp.net后台方法

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的声明 后台<C#>: using System.Web.Script.Services; [WebMethod] public static string SayHello() { return "Hello Ajax!"; } 前台<JQuery>: 1 2 3

基于 jQuery 的专业 ASP.NET WebForms/MVC 控件库!

目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策略(MVC5+EF6) [第四篇]ASP.NET MVC快速入门之完整示例(MVC5+EF6) [番外篇]ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6) 请关注三石的博客:http://cnblogs.com/sanshi 新建项目 打开VS2015,找到菜单项[文件->

详解JQuery Ajax 在asp.net中使用总结

自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题.本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方,欢迎大家指正和补充. 本文将从Ajax请求aspx.ashx和asmx三种方式讨论. 首先看看请求aspx的情况 Aspx页面的Ajax请求可以有两种方式: 1. 通过使用get或者post方法,传递页面地址为url参数的值,并附带一些标记参数,直接请求.这种方式的Ajax被一些人誉为"假的Aja