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

时间：2021-12-30 12:49:31

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;
            }
        }
    }
}

　　

　

标签：

相关文章